Solved

jquery replace 'show detail' with 'hide detail' text

Posted on 2011-03-16
1
536 Views
Last Modified: 2012-05-11
http://test.production.esa.edu.au/NDLRN/ndlrnCatalog/final.html

I got the accordian effect working, but the 'show detail' text needs to be replaced with 'hide detail' when it is clicked on.

replace 'show detail' with 'hide detail' and vice versa when clicked on again.

here's some of the key code i added to the jquery:

in .find("h3") i added .prepend('<span class="showHide" style="float:right;">Show Details</span>')
0
Comment
Question by:jeremyll
1 Comment
 
LVL 3

Accepted Solution

by:
ccwill88 earned 500 total points
ID: 35153600
use html() to modify :

.click(function() {
      $(this)
 	.html('<span class="showHide">HIDE Details</span>')
	    .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
        .next().toggleClass("ui-accordion-content-active").slideToggle();		
      return false;
    })

Open in new window

0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now