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!