Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

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

Posted on 2011-03-16

1 solution

Medium Priority

552 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>')

Comment

Question by:jeremyll

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

1 Comment

LVL 3

Accepted Solution

by:ccwill88

ccwill88 earned 2000 total points

ID: 351536002011-03-16

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

Featured Post

Question has a verified solution.

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

How to Become a Web Developer

Article by: Ryan

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?

Get HTML5 Certified in July’s Course of the Month

Article by: Experts Exchange

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.

Rounded Corner Effect in CSS

Video by: Sarah

In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)