For my website, I recently incorporated a jQuery plugin to create a dynamic multilevel accordion menu. You can view the plugin here: http://codepen.io/anon/pen/BNqvvB
While I have some experience with programming, jQuery is relatively new to me. The issue I'm facing is that the current setup only expands the child <h4> element when the parent <h3> is clicked, leaving the sub-child <p> section untouched. This structure works well for displaying multiple options within the lower child level, like titles of news stories, but in my scenario, where I want to present individual stories at the parent level and their corresponding flavor text and passages at the child level, this functionality falls short.
I need both the flavor text within the <h4> tag and the story passage within the <p> tag to expand simultaneously when a user clicks on the story title placed in the <h3> tag. How can I achieve this desired behavior?
Regarding the jQuery code snippet:
// Your jQuery code goes here
var headers = ["H1","H2","H3","H4","H5","H6"];
$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();
if($.inArray(name,headers) > -1) {
var subItem = $(target).next();
//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div").filter(function() {...}
// Add your custom code logic here
});
Concerning the HTML structure:
<!-- Your HTML content resides here -->
...
...
</aside>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<strong>Your CSS Styling:</strong></p>
<pre><code>* {
margin: 0; padding: 0;
}
// CSS styling rules here