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>

Can you post also the HTML list you are working with? We don't know what is .heading, .bgDescription or .description or even your list structure. — Alvaro
– Alvaro, Commented Jun 21, 2013 at 8:41
I tested in Chrome with .click instead of .hover and seems to work: jsfiddle.net/4Vz63/841 — maqjav
– maqjav, Commented Jun 21, 2013 at 8:45

Konstantin Dinev · Accepted Answer · 2013-06-21 08:43:40Z

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);
            }
        );
    });

answered Jun 21, 2013 at 8:43

Konstantin Dinev

35k14 gold badges79 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max25 Over a year ago

hi konstantin...thanks for your reply...but the if want change the hover function into onclick...if i change that into onclick...it will not work properly sir...

Alvaro · Accepted Answer · 2013-06-21 08:57:49Z

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

skparwal · Accepted Answer · 2013-06-21 09:03:40Z

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

Shinov T · Accepted Answer · 2013-06-21 09:06:08Z

0

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>

answered Jun 21, 2013 at 9:06

Shinov T

8625 silver badges9 bronze badges

Collectives™ on Stack Overflow

change hover function into click function in jquery accordian

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related