Is it possible to reveal hidden text within div elements on a webpage when another div is clicked? How can I achieve this using classes for the divs?
Below is the HTML code in question:
<div id="post-<?php the_ID(); ?>" <?php post_class('team-member'); ?>>
<?php echo get_the_post_thumbnail($page->ID, array(441,293)); ?>
<div class="bio-button">BIO</div>
<h2><?php the_title(); ?></h2>
<h3><?php the_excerpt(); ?></h3>
<div class="team-text">
<p><?php the_content(); ?></p>
</div>
</div>
And here is the jQuery script being used:
$('.bio-button').toggle(function () {
$('.team-text',this).show();
}, function () {
$('.team-text',this).hide();
return false;
});
Essentially, each .team-member div contains hidden .team-text that should become visible when its associated .bio-button is clicked.
If something seems off with my jQuery implementation, please let me know what corrections need to be made.