Make a child div visible on click
Question
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!
3 answers
solution1
0 2012-06-28 13:58:47
It is doing this because you are calling the_content() twice. I am assuming your file looks like:
<?php get_header();
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<ul>
<li class="main"><a href="#" title="Title 1"><?php the_title(); ?></a> <div class="child"><?php the_content(); ?></div> </li>
<li class="main"><a href="#" title="Title 2"><?php the_title(); ?></a> <div class="child"><?php the_content(); ?></div> </li> <ul>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
You need to have two loops, but I can't supply detail without seeing more code. Read about multiple loops .
solution2
0 ACCPTED 2012-06-28 15:04:23
the reason why your first div is toggled no matter where you click, is because you use the hard-coded id foo . Pass this to toggle_visibility instead of the literal 'foo' and inside toggle_visibility function find the div that you want to toggle (this is going to be the first child of the passed parameter).
solution3
0 2012-06-28 15:09:32
Throw the parameter away and build the id you want to set visible/invisible using the id of the element which triggers the event.
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';
}
};
And as long as the thing you want to show always has a id+'menu' or whatever, you can show it with the function. (notice that the parent has id links and the child has id linksmenu )
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.