Question

I’m trying to make a page with some Points in it.

E.g:

• Point1
• Point2
• Point3

Each one of these points has some text that is hidden, until we click on the Point, it’s then shown below it.

I used the slidetoggle Effect in jquery, but I don’t know how to specify that just the selected point will be shown alone. Now, when I press any of them, they are all opened at the same time.

I used this code:

$(document).ready(function(){
$(".point").click(function(){
$(".explanation").slideToggle("fast");
});
});

So, any ideas?

Thanks a lot.

Answer 1

You need to find the explanation object that is associated with the clicked on point. You can get the clicked on point within the click handler by using this. You didn’t show you HTML so I’ll have to make up an example to show you how:

<div class="point>
    other HTML here
    <div class="explanation">
        This is the explanation for this point.
    </div>
</div>

$(document).ready(function(){
    $(".point").click(function(){
        $(this).find(".explanation").slideToggle("fast");
    });
});

If you want a more specific answer, post your HTML so we can see how the explanation object is related to the point object in your HTML. This assumes the explanation is inside the point object. If it’s a sibling, it would take slightly different jQuery.