CODEWITHSUNDEEP
javascriptjquerycsshtml
TomG103
TomG103

Reputation: 312

LI gets clicked and shows another LI but not the rest on the page

Rather green at this whole web dev thing. I have an HTML document that has a list of links (LIs) that when clicked, the area under it expands and more text shows up.

Example, you have a book title and when you click on it, information on the book appears under it. You click it again or click another LI on the page and it would disappear.

I have the styling fine, just can't seem to figure out the JavaScript or JQuery. Here's the HTML:

<li class="parent"><a href="#">The Wheel of Prison Operations: Useful Tool for Successful
Management of Security</a></li>
<ul class="story">
  <li>Publication, authored “The Wheel of Prison Operations: Useful
    Tool for Successful Management of Security”. June/July1999 issue
    of “Correctional Security Report” a national publication on
    correctional security operations.</li>
  </ul></br>

  <li class="parent"><a href="#">Use Of Force - Current Practice and Policy</a></li>
    <ul class="story">
      <li>Book on Use of Force in Prisons, September 1998, asked to co-author a book on use of force in
        prisons to be published by the American Correctional Association on use of force in US and
        Canadian Prisons. Use Of Force - Current Practice and Policy Published November 1999.
        Advertised as ACA “Bestseller” for several years.</li>
      </ul></br>

Here's the JavaScript (attempt): 

    <script>
  $(document).ready(function(){
    $(".story").css("visibility", "hidden");

    $("li").click(function() {
      $(this).children().css("visibility", "visible");
    });
  });
</script>

and or this too but neither worked

    <script>
 $(document).ready(function() {
  $('.parent').click(function() {
      $('.story').toggleClass('visible');
  });
});
    </script>

I'm open to suggestions on how to do this cleaner or where I might have messed up. Just trying to get the hang of this as it is kind of fun. Thanks in advance.

Upvotes: 1

Views: 76

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206352

To start from you cannot have <br> and <ul> as sibling of a <li>
Place BR and UL tags as LI childrens

After you fixed your HTML markup you can go for jQuery or even using CSS only

A far better HTML markup would be like:

<ul id="books">

  <li>
    <h2>Book 1</h2>
    <div>
      Book 1 story here
    </div>        
  </li>

  <li>
    <h2>Book 2</h2>
    <div>
      Book 2 story here
    </div>        
  </li>

</ul>

which than changes your jQuery logic aswell (at least regarding selectors, beside all the fixes to slide the book content story)

Here's a quick demo:

jQuery(function($){

  var $allBooksStories = $("#books li > div");

  $("#books h2").click(function(){
    $allBooksStories.slideUp();
    $(this).next("div").stop().slideToggle();
  });

});
*{margin:0;}
#books div{
  display:none; /*Hide all stories initially*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="books">

  <li>
    <h2>Book 1</h2>
    <div>
      Book 1 story here
    </div>        
  </li>

  <li>
    <h2>Book 2</h2>
    <div>
      Book 2 story here
    </div>        
  </li>

</ul>

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You have to toggle only story ul under clicked parent li and not all story ul. Also did not see visibility CSS class in your post so used toggle() only

 $(document).ready(function() {
      //hide all story ul by default on page load
      ('.story').hide();

      $('.parent').click(function() {
          //find story under clicked parent, where $(this) is instance of clicked element
          $(this).find('.story').toggle();
      });
    });

Upvotes: 0

Related Questions