hide / show toggle

by panchroma

HTML

<p>Such interesting text, eh?</p>

<div id ="extra-options"> The Village on Dieppe Blvd. is an inviting neighbourhood offering a prestigious, convenient and active lifestyle with several picturesque walking and cycling trails nearby. It is located on major bus routes and is within walking distance to the Dieppe Aquatic and Sports Centre, a fitness centre, unique retail shops such as Voyages Dieppe Travel,Chaussures Kadam Shoes, Cremerie Bennic Dairy Bar, Enlighten Laser Clinic and Spa, Broadway Communications, ATOMIKNB INC and Coop Dieppe grocery store and gas bar. </div>

<a href="#"id="more-less-options-button">more</a>

<button id="more-less-options-button">more</button>


<p><br /><br />source : http://css-tricks.com/?p=9861 and  http://api.jquery.com/toggle/ </p>

CSS

#extra-options{
    display:none;
}

JavaScript

jQuery("#more-less-options-button").click(function() {
     var txt = $("#extra-options").is(':visible') ? 'more' : 'less';
     $("#more-less-options-button").text(txt);
     $("#extra-options").slideToggle(1000);
   
});