CODEWITHSUNDEEP
jqueryhtml
Praful Bagai
Praful Bagai

Reputation: 17382

jQuery show one hide all divs

Well after looking many post on SO, I am still not able to get where I'm going wrong. There is no change in my code. It still shows every data. I want data from <div class="span9"> to hide upon selecting a link from <div class="span3">

Where I'm going wrong?

<div class="row">
   <div class="span9" id = "4_2">
      hello<br>
      How are you????
      2013-08-06 14:33:16
    </div> <!--end of div class span9 -->
    <div class="span3">      
         <a href="#" class = "dropdown-link">mithila</a>
    <div> <!--end of div span3-->

    <div class="span9" id = "1_1">
       My name is praful<br>
       2013-08-06 14:22:17
    </div> <!--end of div class span9 -->

     <div class="span3">
        <a href="#" class = "dropdown-link">mithila</a>
     </div> <!--end of div span3-->
</div><!--end of div row-->

jquery

$(document).ready(function(){

  $('div.row').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $div = $("div.span9", $dropdown);
      $div.toggle();
      $("div.span9").not($div).hide();
      return false;
    });

});

  $('html').click(function(){
    $("div.span9").hide();
  });

});

Upvotes: 0

Views: 1868

Answers (4)

Sergio
Sergio

Reputation: 28837

$(document).ready(function () {
    $('.span9').hide();  // I put this here but best is to have it in CSS
    $(".span3").click(function () {
        $('.span9').hide();
        $(this).prev('.span9').show();
    });
});

DEMO HERE

You don't need so much code. This code will hide/show the previous .span9 to the clicked .span3.

I added $('.span9').hide(); in the jQuery but better would be to have in CSS .span9 {dislay:none;} so they hide from the beginning.

Upvotes: 1

alutz
alutz

Reputation: 192

Some of your HTML was wrong see a working example of the HTML and jQuery here:

http://jsfiddle.net/alutz33/KrgnT/1/

<div class="row">
<div id="4_2" class="span9">hello<br />How are you???? 2013-08-06 14:33:16</div>
<!--end of div class span9 -->
<div class="span3"> <a href="#" class="dropdown-link">mithila</a>

</div>
<!--end of div span3-->
<div class="span9" id="1_1">My name is praful
    <br>2013-08-06 14:22:17</div>
<!--end of div class span9 -->
<div class="span3"> <a href="#" class="dropdown-link">mithila</a>

</div>
<!--end of div span3-->


$(document).ready(function () {
    $('.span3').on('click', 'a', function () {
        $(".span9").hide();
    });
});

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

Add a click handler, prevent the default link follow, hide the span9 div:

$(document).ready(function () {
    $('.row').on('click', 'a.span3', function (e) {
        e.preventDefault();
        $("div.span9").hide();
    });
});

The rest of the code, delete?

Working example: http://jsfiddle.net/zsnp5/

Upvotes: 0

alutz
alutz

Reputation: 192

I'm not sure what your Jquery code looks like, but maybe try something like this?

    $('.span3').on('click', 'a', function(){
        $('.span9').hide();
    });

Upvotes: 0

Related Questions