显示/隐藏或切换同一类的多个元素，一次单击仅显示一个

Question

Alright. So I'm going to try and explain this the best I can. I just don't understand how to use jQuery in HTML and a javascript answer would be most appreciated, but I'll take jQuery if you can give me HTML with it, and not just jQuery code.

I have a guide page, the guide page itself is embedded into the main page using php (index.php?content=guide). On the guide page, I would like to use a show/hide OR a toggle function of sorts to toggle certain parts of the page, as related to the guide. Then, I would like to only show one at a time, as one link is clicked, only show the clicked elements and hide the rest. The list is on the left hand side of the page, while the content to be shown is on the right.

`http://jsfiddle.net/wesman2232/2m2jjcc9/`

(Why isn't toggle working on jsfiddle? It's working fine on my local webserver)

Normally I would just make a different php page for each and every subsection (index.php?content=guide&do=requirements) but I want to try and get away from that, so I'm trying to just get it in one whole page

Currently, it toggles like I want, but I would rather have it all in one script instead of having to write out something like show('news'); show('news2'); hide('updates'); hide('updates2'); etc etc. Also if you just kept clicking on Synopsis it would toggle between the two instead of just switching to that one, and that one only.

I get that this isn't multiple, but for the multiple part is where I have something like this on the media page:

`http://jsfiddle.net/wesman2232/mwnua9q8/`

except I would change it from using id to class and set them all having the same class right?

Guess I need to go back and re-learn everything cause I'm having a hard time wrapping my brain around all this haha. I've tried reading other questions but still can't get it to work the way I want it to.

Answer 1

The problem with your code, in my opinion, is that it is outdated. You are using tables for non tabular design and you are making it difficult for yourself using pure JS in comparison to jQuery.

You need to do the following:

• do away with tables and use divs
• use the powerful ways of styling your content with CSS3
• even though it is very good to know plain JS, use jQuery to make coding fun and easy.
• always try to make your HTML as clean as possible with the use of IDs and Classes

This is the way I would redo your code:

 $(".link").click(function (e) { e.preventDefault(); $(".content").removeClass("active"); var content_id = $(this).attr("href"); $(content_id).addClass("active"); }); 

 #wrapper { text-align: center; } #content_container { margin-top: 10px; } .content:not(.active) { display: none; } .title{ font-weight:bold; text-transform: capitalize; font-size: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div id="wrapper"> <div> <a class="link" href="#screenshots">Screenshots</a> | <a class="link" href="#videos">Videos</a> | <a class="link" href="#wallpaper">Wallpapers</a> </div> <div id="content_container"> <div id="screenshots" class="content active"> <div class="title">Screenshots</div> <div class="description">Screenshot description</div> </div> <div id="videos" class="content"> <div class="title">Videos</div> <div class="description">Videos description</div> </div> <div id="wallpaper" class="content"> <div class="title">Wallpapers</div> <div class="description">Wallpapers description</div> </div> </div> </div> 

Answer 2

Try this. It's a jquery version.

    $().ready(function()
    {
   $('#gm, #pg').click(function()
{
    if($(this).attr("id") == "gm")
    {
        $("#gameinformation").toggle();
        if($("#playguide").is(":visible"))
        $("#playguide").toggle();
    }
    else
    {
        $("#playguide").toggle();
        if($("#gameinformation").is(":visible"))
        $("#gameinformation").toggle();
    }
});
    });

Fiddle : http://jsfiddle.net/2m2jjcc9/2/

ALTERNATE APPROACH :

If you multiple section to toggle, you may use the following. I used an approach to tag each corresponding 'UL' tags of 'a' with an attribute called 'data-dependency' and use it to toggle sections.

$('a').click(function()
{
    var $this = $(this).attr('id');
    $('a').each(function()
    {
        var id = $(this).attr('id');
        if(id == $this)
        {           
             $("ul[data-dependency='" + id + "']").toggle();           
        }
        else            
        {
           if($("ul[data-dependency='" + id + "']").is(":visible"))
           $("ul[data-dependency='" + id + "']").toggle();
        }
    });
});

Fiddle : http://jsfiddle.net/2m2jjcc9/4/

UPDATED BASED ON REQUIREMENT TO KEEP ALL MENUS OPTIONS OPEN :

$('a').click(function()
{    
    var $this = $(this).attr('id');
    if($("ul[data-dependency='" + $this + "']")[0] != undefined)
      $("ul[data-dependency='" + $this + "']").toggle();
    else
        $(this).closest('li').find('ul').toggle();
});

Fiddle : http://jsfiddle.net/2m2jjcc9/5/