CODEWITHSUNDEEP
javascriptjquerycssonclick
yesmaybe
yesmaybe

Reputation: 25

Expand div on click

I searched these forums for a way to implement 'jquery expand div on click'

I found a simple and ideal tutorial but couldn't implement it when reinacting the code.

Is this code still valid with current jquery? I believe I have replicated the demo exactly, just not sure about the link to the script.

Here is the tutorial I am working from [link: https://stackoverflow.com/a/20144029/1471333]

[DEMO][2]

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Click to collapse":"Click to read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

[link [2]: http://jsfiddle.net/mWcmg/1/]

and here is my result at [link removed], where the demo resource file works, but my coding doesn't open, for whatever reason. Perhaps the jquery I link to has changed?

EDIT here is a snippet of the HTML code.

<div class="wrapper">
<div class="small">
<p>Lorem..</p>
</div>
<a href="#">Click...</a>
</div>

Andy

Upvotes: 2

Views: 16438

Answers (4)

Robert Munn
Robert Munn

Reputation: 798

As long as you are using jQuery you might as well take advantage of the features it offers. The toggle() method allows you to show/hide a component, with animations and everything that gives you. Here is an excerpt from a component I wrote that turns any div you specify into a collapsible pane with a title bar:

  CollapsiblePane.prototype.toggle = function( img ){
    var self = this, icon = ( ( self.selector.css( "display" ) === "none" ) ? "collapse" : "expand" );
  self.selector
     .toggle( 'blind', {}, 200, function(  ) {
        $( img ).attr( "src", self.path + "img/" + icon + ".png");
      });
  };

If you want to see the full source, you can see it here: https://github.com/robertdmunn/gadget-ui. There is a lot more going on than you need to see to illustrate what toggle() does, but if you want to get a sense of what you can do with jQuery to extend your UI components, take a look.

Upvotes: 0

Kimmedy
Kimmedy

Reputation: 1

Your code is correct so you could have forgotten to make the document ready (onDomready).

You can do that to put your code between $(document).ready(function(){...});

Like so: 

$(document).ready(function(){
    $('.wrapper').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        $(this).text(this.expand?"Click to collapse":"Click to read more");
        $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    });
});

Upvotes: 0

haul
haul

Reputation: 136

Put your javascript inside the document ready event. Because in your example, you execute the javascript before the DOM is ready.

$(document).ready(function()
{
    $('.wrapper').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        $(this).text(this.expand?"Click to collapse":"Click to read more");
        $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    });
});

Upvotes: 2

kapantzak
kapantzak

Reputation: 11750

Try this: jsFiddle

HTML

<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a id="click" href="#">Click...</a>
</div>

CSS

.small {
    height: 30px;
    overflow: hidden;
}
.big {
    height: auto;
}

jQuery

$('#click').click(function() {
    $('div.wrapper').find('div').toggleClass('small big');
});

Upvotes: 0

Related Questions