How to change the expand direction on .toggle()?

Question

I am using .toggle() jquery for expand/collapse.

Do you know how to change the expand/collapse direction from bottom to top instead of top-left to bottom-right? I am no jquery expert, I found the demo and use these codes...

Here is my working file: http://www.streetlightministries.ca/2013 - and click "Times & Location" on the top right corner. You will see it expanding from top-left to bottom-right. I rather to have it expand from bottom to top.

I would be really appreciate if you are able to help me out!

Thanks

Markusmarl

Answer 1

For starters, I would use .slideToggle() instead of .toggle(). It just a simple collapse and expand. Try that out first and see if you like that result better.

Stablish

Answer 2

You are looking for slideToggle.

If you're lucky, you'll just need to change toggle() to slideToggle().

Carabin

I tried but it didn't work, I think it is because the toggle() and slideToggle() use different jquery. Thanks for your help tho! – Markusmarl

Well i don't get how this didnt work but the other answer worked since it's exactly the same, but anyway, it worked and that's what matter! – Eye

Answer 3

Try this

$('blah').toggle('drop', {direction: 'right'}, 150)

Landwaiter

Answer 4

Try this, using the callback property

<script type="text/javascript">
            $(document).ready(function () {                        
                $(".scCollapAnchor").click(function () {
                    $('.iiColapsable').toggle("slide",
                        {
                            direction: 'up',
                            complete: function () {
                                if ($('#spanCollapsable').hasClass('glyphicon-chevron-down')) {
                                    $('#spanCollapsable').removeClass('glyphicon-chevron-down');
                                    $('#spanCollapsable').addClass('glyphicon-chevron-up');
                                }
                                else {
                                    $('#spanCollapsable').removeClass('glyphicon-chevron-up');
                                    $('#spanCollapsable').addClass('glyphicon-chevron-down');
                                }
                            }
                        }, 400);
                });
            });
        </script>

Helvetia