Question

I’m trying to implement the Toggle function in Jquery for the first. When I tested it out in a simple html page, it worked. Than I copied the code into my CF page. Since I’m trying to have it pulled from my database dynamically, it implemented the function on all the <p> tag. I think I have to use the this command somewhere but not sure how to used it properly to make it work. When the user click on the biography they want, it will open up only 1 instead of all the other biography at the same time. Suggestions?

<script type="text/javascript">

$(document).ready(function(){

    $(".toggle_container").hide(); 

    $('.trigger').click(function() {
        $(this).toggleClass("toggle_container")
    });

});
</script>


<cfif Statement NEQ ''>
<p><a class="trigger" href="##">Research Profile</a></p>
<p class="toggle_container">#Statement#</p>
</cfif>

Answer 1

I think you have two different jquery implementations here.

This line uses jquery hide to hide the element:

$(".toggle_container").hide();

This uses jquery toggleClass line to toggle a class:

$(this).toggleClass("toggle_container")

The class is not specified in your code so it has no class to toggle. jquery toggleClass docs

You could try this instead:

$(document).ready(function(){

$(".toggle_container").hide();

$('.trigger').click(function(e) {
    e.preventDefault();

    $(this).parent().next().toggle();
});
});

Fiddle example: http://jsfiddle.net/jensbits/bgWJz/