TomG103 TomG103 - 7 months ago 8
Javascript Question

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.

Answer

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>

Comments