change hover function into click function in jquery accordian

Question

actually m working on this accordian,i want to change this accordian hover into click funation. but while i chnage i got some errors..if anybody how to change the hover function into onclick function... i paste the full code here....

<script type="text/javascript">
        $(function() {
            $('#accordion > li').hover(
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'480px'},500);
                    $('.heading',$this).stop(true,true).fadeOut();
                    $('.bgDescription',$this).stop(true,true).slideDown(500);
                    $('.description',$this).stop(true,true).fadeIn();
                },
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'115px'},1000);
                    $('.heading',$this).stop(true,true).fadeIn();
                    $('.description',$this).stop(true,true).fadeOut(500);
                    $('.bgDescription',$this).stop(true,true).slideUp(700);
                }
            );
        });
    </script>   

Image 1: Michelle Meiklejohn / FreeDigitalPhotos.net

Image 2: Luigi Diamanti / FreeDigitalPhotos.net

Image 3: Tina Phillips / FreeDigitalPhotos.net

Image 4: Ahmet Guler / FreeDigitalPhotos.net

        <ul class="accordion" id="accordion">
            <li class="bg1">
                <div class="heading">Guler</div>
                <div class="bgDescription"></div>
                <div class="description">
                    <h2>Guler</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                        ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur.</p>
                    <a href="#">more &rarr;</a>
                </div>
            </li>
            <li class="bg2">
                <div class="heading">Phillips</div>
                <div class="bgDescription"></div>
                <div class="description">
                    <h2>Phillips</h2>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                        quae ab illo inventore veritatis et quasi architecto beatae vitae
                        dicta sunt explicabo. </p>
                    <a href="#">more &rarr;</a>
                </div>

            </li>
            <li class="bg3">
                <div class="heading">Diamanti</div>
                <div class="bgDescription"></div>
                <div class="description">
                    <h2>Diamanti</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                        ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur.</p>
                    <a href="#">more &rarr;</a>
                </div>

            </li>
            <li class="bg4 bleft">
                <div class="heading">Meiklejohn</div>
                <div class="bgDescription"></div>
                <div class="description">
                    <h2>Meiklejohn</h2>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                        quae ab illo inventore veritatis et quasi architecto beatae vitae
                        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni
                        dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    <a href="#">more &rarr;</a>
                </div>

            </li>
        </ul>
    </div>

Answer 1

Just call the active API for the accordion:

    $(function() {
        $('#accordion > li').hover(
            function () {
                $('#accordion').accordion('option', 'active', $(this).index());
            },
            function () {
                $('#accordion').accordion('option', 'active', false);
            }
        );
    });

Answer 2

You were hiding the current element on mouse out. Now you can not do this with the click event but you can act over the rest of elements in which you didn't click.

So, whenever you click on one, the previous clicked will be on that list of "all except the one I've just clicked", which means, the siblings .

This might be what you are looking for:

$('#accordion li').click(function () {
    var $this = $(this);
    $this.stop().animate({
        'width': '480px'
    }, 500);
    $('.heading', $this).stop(true, true).fadeOut();
    $('.bgDescription', $this).stop(true, true).slideDown(500);
    $('.description', $this).stop(true, true).fadeIn();

    //for each of the other ones I didn't click
    var siblings = $this.siblings();
    siblings.each(function(){
        var $this = $(this);
        $this.stop().animate({
            'width': '115px'
        }, 1000);
        $('.heading', $this).stop(true, true).fadeIn();
        $('.description', $this).stop(true, true).fadeOut(500);
        $('.bgDescription', $this).stop(true, true).slideUp(700); 
    });
});

Living demo

Answer 3

Do some change according to your need.

HTML Changes as per jquery accordian:

            <div class="accordion" id="accordion">

                <div class="heading">Guler</div>
                <div class="description">
                    <h2>Guler</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                        ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur.</p>
                    <a href="#">more &rarr;</a>
                </div>

                <div class="heading">Phillips</div>

                <div class="description">

                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                        quae ab illo inventore veritatis et quasi architecto beatae vitae
                        dicta sunt explicabo. </p>
                    <a href="#">more &rarr;</a>
                </div>
</div>

JS Code:

$(function() {
     $('#accordion').accordion({
         collapsible: true
          }
    );
});

example

Answer 4

try this

<script type="text/javascript">
    $(function() {
        $('#accordion > li').click(
            function () {
                var $this = $(this);
                $("#accordion li").find(".description:visible").slideUp(500);
                $("#accordion li").find(".bgDescription").stop(true,true).slideUp(700);
                $("#accordion li").find(".heading").stop(true,true).fadeIn();
                $this.stop().animate({'width':'480px'},500);
                $('.heading',$this).stop(true,true).fadeOut();
                $('.bgDescription',$this).stop(true,true).slideDown(500);
                $('.description',$this).stop(true,true).fadeIn();
            });
    });


</script>