Solved

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

Posted on 2011-03-16

1 solution

547 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 500 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

AJAX form submission with customized server field validation

Article by: Julian

This article discusses how to implement server side field validation and display customized error messages to the client.

Have Questions about DevOps? Get them answered at The Agility Tour 2017.

Article by: xMatters

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…

Introduction to Accessibility (Part 2)

Video by: Jason

The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

Web Development

Flexible Layouts

Video by: Mark

Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).