Edit my code to make it work please.
Edited for latest version.
Here is what I have:
<body>
<!-- visibility toggle -->
<script type="text/javascript">
<!--
function toggle_visibility()
{
if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
document.getElementById(window.event.srcElement.id+'menu').style.display='none';
}
else{
document.getElementById(window.event.srcElement.id+'menu').style.display='block';
}
};
//-->
</script>
Here are my divs (edited to show exactly what I have)
<ul class="lyrics"><h3>ALL LYRICS</h3>
<?php while ( have_posts() ) : the_post(); ?>
<li ><a id="links" href="#" onclick="toggle_visibility();"><?php the_title(); ?></a>
<div id="linksmenu"><?php the_content();?></div>
</li>
<?php endwhile; // End the loop. Whew. ?>
</ul>
Here is what happens:
Regardless which link I click on, only the text associated with the very last “the_content” displays.
Here is what I need:
Initially all the “child” divs are not visible.
When I click on “Title 1” link, the “Child text 1” will become visible.
When I click on “Title 2” link, the “Child text 2” will become visible and the “Child text 1” will become not visible.
This is going to be in a WordPress blog so the number of Title divs will change. There will always be only one child.
Thanks in advance!
the reason why your first
divis toggled no matter where you click, is because you use the hard-coded idfoo. Passthistotoggle_visibilityinstead of the literal'foo'and insidetoggle_visibilityfunction find the div that you want to toggle (this is going to be the first child of the passed parameter).