Expand div upon clicking

Question

I created a div that has the full height of it's content set to 500px. First 200px of the 500px is, lets say, a preview. So I set it's height to 200px and overflow: hidden. I then added this script:

<div class="stretcher">
<script type="text/javascript">  
    $('.stretcher').toggle(
        function(){
            $(this).animate({'height': '500px'}, 300);
        }, 
        function(){
            $(this).animate({'height': '200px'}, 300);
        }
    );
</script>

That works but the problem is that I need the contents of the div to be clickable. However, with this script wherever I click it either expands the div or returns it back to the original 200px.

Any idea how I could do it? Maybe adding icons of arrow up and down or something.

Please share your HTML. Is stretcher 500px height initially? Or is it a container for "preview" element? — mishik, Jun 07 '13 at 12:19
Instead of changing the height, why don't you show/hide content? Check this http://stackoverflow.com/questions/7326925/difference-betweet-style-visibility-and-style-display — zik, Jun 07 '13 at 12:19
You will get more information over here http://www.w3schools.com/jquery/jquery_hide_show.asp — Swapneel Kondgule, Jun 07 '13 at 12:23

score 4 · Answer 1 · answered Jun 07 '13 at 12:21

4

The toggle() function used that way is deprecated and removed in newer versions of jQuery, use a flag instead :

$('.stretcher').on('click', function(e) {
    if (e.target === this) {
        var h = $(this).height() > 220;
        $(this).animate({'height': ( h ? 200 : 500 ) }, 300);
    }
});

Checking if the target equals this stops any problems when clicking other elements inside .strecher

answered Jun 07 '13 at 12:21

adeneo

312,895
29
395
388

(+1) This is the best way to do it. The `===` ensures that it is an exact match. In this situation this means that if there is another clickable element within the div it will respect that element and not `.toggle` – Kevin Lynch Jun 07 '13 at 12:32
this is really good but as ive seen i need to click on edges of div for this to work... anyways i really appriciate help but i used Archers code.. works like a charm since i created half of those upper 200px to be clickable in order to expand or contract. thnx once more – Dev Jun 07 '13 at 14:11

score 2 · Answer 2 · answered Jun 07 '13 at 12:20

Try this...

<div class="stretcher">
    <div class="clickable"></div>
</div>
<script type="text/javascript">  
    $('.clickable').toggle(
        function()
        {
            $(this).parent().animate({'height': '500px'}, 300);
        }, 
        function()
        {
            $(this).parent().animate({'height': '200px'}, 300);
        }
    );
</script>

You have an area called clickable and when you click that it animates the parent container div, but it won't do it when you click the div itself.

thnx m8 ... tihs works for me like a charm.. this clickable div i positioned and puted where i need it and eveyrthing works gr8..thnx — Dev, Jun 07 '13 at 14:12

score 0 · Answer 3 · answered Jun 07 '13 at 12:35

You could wrap your code in a function that has an exact match. As @adeneo points out. An example below using your existing code in this manner.

$('.stretcher').on('click', function(e) {
    if (e.target === this) {
        $('.stretcher').toggle(
        function(){
            $(this).animate({'height': '500px'}, 300);
        }, 
        function(){
            $(this).animate({'height': '200px'}, 300);
        }
    );
    }
});

Expand div upon clicking

3 Answers3