jquery show / hide div on click?

Question

I'm trying to use jquery to show and hide a div onclick, and, although I'm not getting any errors, it's not showing or hiding anything either.

**EDIT - UPDATED **

$(document).ready(function() {    
        $("#nav-inner a").click(function() {
            var type = $(this).attr("class");
                $("div.v1 > div").not("." + type).stop().hide().end().filter("." + type).stop().show();
                return false;
    });

});

Here's the jquery:

$(document).ready(function() {
        if($("#nav-inner")) {
                $("#nav-inner ul li a").click(function(evt) {
                        var type = $(this).attr("class");
                        var rowcount = 0;
                        $('div.v1 .vc').each(function(idx,el) {
                                if(type == 'typea') {
                                    if($(el).hasClass('typea')) {
                                                $(el).show();
                                        } else {
                                                $(el).hide();
                                        }
                                } 
                        });
                    });
    }
});

And here's the markup:

<div id="page">
    <div id="header">
        <div id="nav">
            <div id="nav-inner">
                <ul class="nav-inner-li">
                    <li>
                        <a class="typea" href="#"><img src="/images/typea.png"></a>
                        <a class="typea" href="#">Type A</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="content">
        <div id="content-content">
            <div id="content-left">
                <div class="v1">
                    <div class="vc">
                        <div class="typea">
                            <div class="title"> Title </div>
                            <div class="body"> Body </div>
                        </div>

                        <div class="typeb">
                            <div class="title"> Title 2 </div>
                            <div class="body"> Body 2 </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

cletus · Accepted Answer · 2010-02-10 09:17:42Z

4

This can be made much simpler.

$(function() {
  $("#nav-inner a").click(function() {
    var type = $(this).attr("class");
    $("div.vc > div").not("." + type).stop().hide()
      .end().filter("." + type).stop().show();
    return false;
  });
});

Your first error was #nav-inner ul where #nav-inner is actually the ul element. The above grabs the class from the clicked link and then selects the child of div.v1 with that class and toggles it (shows it if hidden, hides it if not).

edited Feb 10, 2010 at 9:17

answered Feb 10, 2010 at 8:49

cletus

627k169 gold badges922 silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

fredrik Over a year ago

I always use e.preventDefault() instead of return false. Correct me if I'm wrong, but doesn't return false only cancel current element's event? and preventDefault() stops the event chain?

phpN00b Over a year ago

Thanks... It works, sort of... Except that I need to hide everything except the divs that have that class. So, clicking on <a class="typea"> shows the typea divs and hides all the others... This looks like it's doing the opposite... ?

cletus Over a year ago

@fredrik: return false is equivalent to preventDefault() and stopPropagation().

phpN00b Over a year ago

I tried the revised version, and now it hides everything and doesn't show anything? I'll put the code that I just tried in the edited version of my original post...

cletus Over a year ago

@phpN00b: i corrected one typo (period at the end of the line after hide(()) and it works perfectly now.

|

Gifted · Accepted Answer · 2013-02-15 15:31:26Z

1

This is a simpler example ..

 <script>
      $(document).ready(function(){
            $('#divtag').click(function(){  //use # for id and . for class
                $('#insidetag').show();     // with parameters slow,fast, or a time in milisecond
            });                             // use toggle to show and hide 
        });
    </script>

<body>
    <div id="divtag">
        <div id="insidetag">
            Click the hide and show
        </div>
    </div>
</body>

answered Feb 15, 2013 at 15:31

Gifted

312 silver badges9 bronze badges

1 Comment

Amod Over a year ago

Your simple comment //use # for id and . for class saved me hours!! Thanks gifted!

Vahid Farahmandian · Accepted Answer · 2016-11-30 11:46:04Z

0

jQuery(".user-profile-info").unbind().click(function(){
    if(jQuery( ".user-profile-info" ).hasClass("collapsed")){
        jQuery('#user-profile-submenu').css('display', 'block');
        jQuery( ".user-profile-info" ).removeClass("collapsed");
    }
    else
    {       
        jQuery( ".user-profile-info" ).addClass("collapsed");
        jQuery('#user-profile-submenu').css('display', 'none');
    }
});

edited Nov 30, 2016 at 11:46

Vahid Farahmandian

6,6227 gold badges48 silver badges68 bronze badges

answered Nov 30, 2016 at 10:48

Anupama Balakrishnan

11 bronze badge

1 Comment

Anupama Balakrishnan Over a year ago

<div class="user-profile-info collapsed"></div> <div id="user-profile-submenu">Content of click</div>

Collectives™ on Stack Overflow

jquery show / hide div on click?

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related