单击文本javascript时打开和关闭div以显示图像

Question

I'm using this javascript to open a div containing an image when clicking on a text http://jsfiddle.net/BfMDL/1/

my script :

$(document).ready(function() {
    $('.image_trombi').hide();

    $('.titre').click(function() {
        $('.image_trombi').slideUp();
        $(this).next().slideToggle();
        return false;        
    });
});

my html

<div><a href="#" class="titre">image 1</a><div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-9.jpg" class="trombi_anim"/></div>
<div><a href="#" class="titre">image 2</a><div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-5.jpg" class="trombi_anim"/></div>
<div><a href="#" class="titre">iamge 3</a><div class="image_trombi"><img src="http://lorempixel.com/output/sports-q-c-200-200-5.jpg" class="trombi_anim"/></div>

It works perfectly, but I would like the div to close after clicking again on the link.

So, click on "image1", open image 1, and click again on "image1" close image 1... and so on...

Answer 1

use only slideToggle() as you are doing slideToggle() you don't need to slideUp() that image container.

$('.titre').click(function() { 
    $(this).next().slideToggle();
    return false;        
});

Fiddle Demo

Answer 2

Here is a simple demo of an accordion effect that i made a year ago.

JS

(function() {

    var menu = $('#acordion'),
        contents = menu.find('.acordion-content').hide();

    menu.children('li').click( function() {
        contents.slideUp(200);
        $(this).children('.acordion-content:hidden').slideDown(200);
    });
})();

HTML

<ul id="acordion">
    <li>
    <div class="acordion-title">Cosa1</div>
    <img class="acordion-content" src="" />
</li>
<li>
    <div class="acordion-title">Cosa2</div>
    <img class="acordion-content" src="" />
    </li>
<li>
    <div class="acordion-title">Cosa3</div>
    <img class="acordion-content" src="" />
    </li>