Struggling to solve this jQuery div collapse/expand problem

Question

I'm using this example as a basis http://simon.tpdserver2.co.uk/jquery/divgrowdemo.htm, I'm trying to modify it so that instead the jQuery plugin generating an html a-href that allows the user to toggle the expand/collapse (in this case it's in the form of "+ Show More" and "- Show Less" links), that I can use a link that's within the actual div itself. So as an example, each of the divs has "Michael Jordan" as the header, I'd like to make that the clickable item that toggles the expansion and collapse. How would I go about doing that?

Answer 1

You are going to have to modify the code so that instead of inserting the new tags it adds them around the header. Because this is someone else script and it was not made for what you want to do. I would suggest just recreating the thing your self and scaling it down to the basics. First change the height to some fixed height and add the ... at the end. Then add an onclick event to the title that removes the fixed height and the ... Then after you have that find some tutorial on doing the sliding effect.

Answer 2

The plugin used on that page adds the link item and click event handler to the divs marked with the 'more-block' class. You would have to modify the plugin. You would need to change it to 'linkify' the header text (i.e. find 'h2' elements in the appropriate divs, in that exmaple, and add a 'click' hander - to make it easier to style you might want to change the contents to a link or button element) and add click handlers for the new links you've added.

Answer 3

Firstly, please increase your acceptance rate. It is too low.

Secondly, you can check this link out: http://jsfiddle.net/sYwER/5/

I have coded it to be exactly the way you want. Post any follow up questions if you have any.

Hope this helps! Cheers :)