CODEWITHSUNDEEP
javascriptjquery
Zhianc
Zhianc

Reputation: 1451

Expanding one single div at a time

http://jsfiddle.net/Hvvw7/

When i click on See More it's expanding all the divs. What should done for it to expanding only the corresponding div?

$(document).ready(function(){
 var rowsshown = 2;
 var rowheight = 1.2; // line height in 'em'
 var ht = (rowsshown * rowheight) - .5; // subtracting the .5 prevents the top of the next line from showing
 $('.info')
  .css({'overflow':'hidden','line-height' : rowheight + 'em','height': ht + 'em' });
});  
$('.aaa').click(function(){

        if ( $(".info").css('height') == 'auto') {
$('.info').css('height', ht + 'em');
} else {
$('.info').css('height','auto');
   $(this).hide();
}
});

Upvotes: 1

Views: 233

Answers (6)

legendofawesomeness
legendofawesomeness

Reputation: 2911

Here is a way of doing it...it hides the show more link for the current div, collapses all other currently opened divs and brings back there show more links.

Upvotes: 0

Moin Zaman
Moin Zaman

Reputation: 25445

inside your .click() function for .aaa find the prev div instead of using .info

like this...

$('.aaa').click(function(){
    var $prev = $(this).prev('div.info');
    if ( $prev.css('height') == 'auto') {
    $prev.css('height', ht + 'em');
    } else {
    $prev.css('height','auto');
       $(this).hide();
    }
    });

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

You need to use $(this).prev() instead of $('.info'). Using the latter changes all the elements as opposed to the corresponding one.

http://jsfiddle.net/zXffb/

Upvotes: 1

Abe Miessler
Abe Miessler

Reputation: 85056

You could use $(this).prev('div') as your selector inside of your click event instead of $(".info") which will select evey element that uses the class info. Seen in this fiddle: http://jsfiddle.net/Hvvw7/3/

Typically I don't like this solution, but your HTML has kind of a weird structure for what you are trying to do so it might be your best option.

Upvotes: 2

Kai Qing
Kai Qing

Reputation: 18833

I think personally the cleanest way to address this is to assign id's to each .info class you have. then have your more links call a function instead of just running on all classes.

<div id="element_link_1" class="info">
    bunch of long text
</div>
<div id="link_1" class="aaa"><a href="#">see more</a></div>

$('.aaa').click(function(){
    toggle($(this).attr('id'));
});

function toggle(id)
{
     if ( $("#element_" + id).css('height') == 'auto') {
        $("#element_" + id).css('height', ht + 'em');
     } else {
        $("#element_" + id).css('height','auto');
        $("#link_" + id).hide();
     }
}

Upvotes: 0

Alastair Pitts
Alastair Pitts

Reputation: 19601

The issue is these lines:

$('.info').css('height', ht + 'em');

&

$('.info').css('height','auto');

What you are doing is selecting all of the DOM elements with the class .info, not just the one preceeding it.

I'd be using jQuery.prev() on your link div to get the preceeding info div.

Upvotes: 0

Related Questions