Hiya,

 

Can somebody please help?

 

I'm trying to use jquery's toggleClass to reveal/hide text by toggling classes with different height attributes.

 

my jquery code is as follows:

 

$(function() {
$(".button").click(function() {
	$('.latestActual').toggleClass('newClass', "fast");
	return false;
});
});

 

My HTML is as follows: (there'll be multiple instances of the below code stacked on top of each other)

 

<div class="dateAndTitle">

   <div class="dateBox">

       <h3>20th January 2010</h3>

   </div>

   <div class="latestTitle">

   <h3>Extended Title Blah Blah Blah.</h3>

   </div>

   <br class="clearing" />

</div>

<div class="latestActual">

   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque.</p>

</div>

<div class="moreNews">

   <p class="button"><a href="#">show/hide</a></p>

</div>

 

My problem is that when I click the show/hide button, all the classes expand. I'm not able to give the divs different class names due to the way the CMS creates multiple news items using a template, so they'll all have the same class name.

 

Does this make sense??

 

I'm hoping I haven't approached this in the completely wrong way..

 

Jon.

Hi,

 

Can't you edit the CMS's template to name the divs?

Maybe add a unique identifier to each instance in the CMS template, or wrap each instance in a parent div, then use jQuery to find, within the parent div

you could use jquery's .wrap() to place a div around your news item then focus on the child of your newly added div