When the LI element is clicked, it triggers the display of another LI element without affecting the rest of the

Question

When the LI element is clicked, it triggers the display of another LI element without affecting the rest of the

New to the web development scene and trying to figure out how to create a collapsible text feature using HTML, JavaScript, and JQuery. I've got the styling down but struggling with the scripting part. Here's an example of what I'm trying to achieve:

Imagine having a list of book titles as links, and when you click on one, more information about the book expands below it. Clicking on another title collapses the previous book info. Here's a snippet of the HTML code:

<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>

Below are the two JavaScript attempts I've made so far:

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

$("li.parent").click(function() {
$(this).next(".story").slideToggle();
});
});
</script>

I would appreciate any suggestions or feedback on how to improve my current approach. Just exploring this new territory and eager to learn more. Thank you!

javascript jquery css html

Answer 1

Answer №1

To begin with, it is important to note that having <br> and <ul> as siblings of a <li> element is not valid HTML. It is recommended to place the BR and UL tags inside the LI elements.

Once you have corrected your HTML markup, you can consider implementing functionality using jQuery or CSS alone.

A more structured HTML markup example would look like this:

<ul id="books">

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

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

</ul>

This updated HTML structure would also require adjustments in your jQuery code for proper selection and handling of elements, especially for sliding the book content story.

Below is a quick demonstration:

jQuery(function($){

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

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

});

*{margin:0;}
#books div{
  display:none; /*Initially hide all stories*/
}

<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 goes here
    </div>        
  </li>

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

</ul>

Answer 2

To begin with, it is important to note that having <br> and <ul> as siblings of a <li> element is not valid HTML. It is recommended to place the BR and UL tags inside the LI elements.

Once you have corrected your HTML markup, you can consider implementing functionality using jQuery or CSS alone.

A more structured HTML markup example would look like this:

<ul id="books">

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

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

</ul>

This updated HTML structure would also require adjustments in your jQuery code for proper selection and handling of elements, especially for sliding the book content story.

Below is a quick demonstration:

jQuery(function($){

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

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

});

*{margin:0;}
#books div{
  display:none; /*Initially hide all stories*/
}

<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 goes here
    </div>        
  </li>

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

</ul>

Answer 3

Answer №2

Here's a suggestion: Make sure to toggle only the story ul under the clicked parent li, without affecting all other story ul elements. I also noticed that you didn't mention a visibility CSS class in your original post, so I utilized toggle() instead.

 $(document).ready(function() {
      // Hide all story ul elements by default when the page loads
      $('.story').hide();

      $('.parent').click(function() {
          // Find the specific story under the clicked parent (referenced as $(this))
          $(this).find('.story').toggle();
      });
    });

Answer 4

Here's a suggestion: Make sure to toggle only the story ul under the clicked parent li, without affecting all other story ul elements. I also noticed that you didn't mention a visibility CSS class in your original post, so I utilized toggle() instead.

 $(document).ready(function() {
      // Hide all story ul elements by default when the page loads
      $('.story').hide();

      $('.parent').click(function() {
          // Find the specific story under the clicked parent (referenced as $(this))
          $(this).find('.story').toggle();
      });
    });

When the LI element is clicked, it triggers the display of another LI element without affecting the rest of the

Answer №1

Answer №2

Similar questions

How do you obtain the string name of an unknown object type?

"Upon refreshing the browser, an Angular map loses its positioning and appears blank

How to change class names dynamically in Vue.js?

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

WordPress is consistently returning 0 when using ajax, however in certain instances it should be returning a value of

Unable to dynamically populate Bootstrap select with real-time search and multiple options using jQuery

Using jQuery, how can I dynamically change the stacking order of an element when clicked?

Guide to directing a user through an Ajax call to a particular Controller and action

Oops! Next.js Scripts encountered an error: Module '../../webpack-runtime.js' cannot be located

CSS Malfunction in Chrome: Some Code Not Displaying Properly

Leveraging an external TypeScript library in a TypeScript internal module

Height not being generated by Div element

Experience the power of Kendo UI Date Picker combined with AngularJS. When the datepicker is initialized, it starts

Ways to transition to an iframe window

What is the best way to update a local variable in JavaScript using Ajax requests?

Unusual outcome observed when inputting a random number into HTML using JavaScript

Struggling to connect CSS and JavaScript files to index.html on Heroku while utilizing Node.js

Dependencies in Scala.js for CSS styling

Utilizing jQuery TableSorter Scroller: How to Achieve Scrolling with Keydown Focus

Is there a Container with a Heading in Material UI?