CODEWITHSUNDEEP
javascriptjquerylistshow
Borut Flis
Borut Flis

Reputation: 16375

Show elements of a specific class Javascript(Jquery)

<div id=klik>KLIK   </div>
<div class="list">
    <div class="list-wrapper">
        <div class="line">1</div>
        <div class="line">2</div>
    </div>
    <div class="line">3</div>
    <div class="line">4</div>
</div>

This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.

$(document).ready(function(){
$(".list").hide();

$("#klik").click(function(){
$(".list-wrapper").show();

});
});

The problem it never shows the elements.

Upvotes: 1

Views: 589

Answers (2)

m90
m90

Reputation: 11812

You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:

$(document).ready(function(){
   $(".list").hide();

   $("#klik").click(function(){
      $(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
   });

});​

Working demo

EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>

Upvotes: 2

Dennis
Dennis

Reputation: 32598

You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.

$(document).ready(function(){
    $(".list").hide();
    $("#klik").click(function(){
         $(".list").show(); //Show .list elements instead

    });
});

Upvotes: 0

Related Questions