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: ]

[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]: /]

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

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./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/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

• javascript
• jquery
• css
• onclick

Share Improve this question Follow edited May 23, 2017 at 12:08 CommunityBot 111 silver badge asked Nov 26, 2014 at 7:44 yesmaybeyesmaybe 2511 gold badge22 silver badges1010 bronze badges 5

• 1 Where's your relevant (minimal, MCVE) HTML? – David Thomas Commented Nov 26, 2014 at 7:45
• 1 Thanks, but there's an 'edit' link, just below your question's tags; click on that (or the one here in this ment) and add your HTML to your question (where it can be read, as opposed to your ment where it's illegible). – David Thomas Commented Nov 26, 2014 at 7:48
• sorry, I've edited the initial question now. – yesmaybe Commented Nov 26, 2014 at 7:55
• So what is the problem. Code works as expected. For example: jsfiddle/mb7jL76k – dfsq Commented Nov 26, 2014 at 7:59
• the tutorial code worked, but not my coding, the issue has been resolved by haul, below. stackoverflow./a/27143926/1471333 thanks for your response – yesmaybe Commented Nov 26, 2014 at 8:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

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

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

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 ponent, with animations and everything that gives you. Here is an excerpt from a ponent 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./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 ponents, take a look.