Simple setup that will hide and show divs…
Link1 Link2 Link3 Link4
Div 1
Div 2
Div 3
Div 4
$(".myLink").bind("click", function() { $(".myDiv").hide(); var divId= $(this).attr("divId"); $("#" + divId).show(); }); // Or with active nav toggles $(".myLink").bind("click", function() { $(".hidden-div").hide(); // deactivate the active class for the bubble $(".myLink").removeClass('active'); var divId= $(this).attr("divId"); $("#" + divId).show(); // activate the active class for the bubble $(this).addClass('active'); });
Then you can setup a loop to do it automagically with the WordPress loop or the Advanced Custom Fields loop. Here is one that uses the Advanced Custom Fields repeater loop.
First, create your list items to link to the hidden divs. Start a counter to have unique div names.
<?php // Loop through the custom field repeater field. if(get_field('our_team')): $i = 0; ?> <?php while(has_sub_field('our_team')): $i++; ?> <li> <a class="myLink" href="javascript:void(0);" divId="div-<?php echo $i; ?>"> <?php the_sub_field('name'); ?> </a> </li> <?php endwhile; ?> <?php endif; // end of get field ?>
Then loop through the divs the same way and add the counter…
<?php // Loop through the custom field repeater field. if(get_field('our_team')): $i = 0; ?> <?php while(has_sub_field('our_team')): $i++; ?> <div class="myDiv" id="div-<?php echo $i; ?>">Div 1</div> <?php endwhile; ?> <?php endif; // end of get field ?>