Change Text on click with jQuery - Please help

Ashley_Smith · June 19, 2011, 11:37pm

Hi,

Re this thread: http://www.sitepoint.com/forums/javascript-15/changing-text-click-jquery-554851.html

I am unable to use this following code twice to change text…

$(this).text($(this).text() == 'More Details' ? 'Hide Details' : 'More Details');

Please can some kind soul help me figure this out to change text for multiple ID’s/Div’s.

Here’s my code. Note, I haven’t duplicated the javascript portion again as it breaks the first one that works.

HTML

<a href="#" id="slick-toggle");">More Details</a>

<br />
<div id="myContent" style="background-color: #CCC; padding: 10px;">          <strong>Cover The Fretboard : Theory and Application on Guitar</strong> - <strong>By Ashley Smith
                                </strong> 
                                
          <br />
          <br />
                                
          Contents: -
          <br /><br />
                               
          <ul>                      
          * <em><strong>About The Author</strong></em>
                                
          <br /><br /><br />
                                 
          * <em><strong>Study Sheet Notes</strong></em> <br />- Important info regarding some documents.                                
          <br /><br /><br />
                 
                                
          * <em><strong>Notes On The Fretboard</strong></em> <br />- An easy way to find and identify any note on the neck.
          <br /><br /><br />
                                
          * <em><strong>Warm Ups</strong></em> <br />- Before you start to play you must Warm Up.
                                
                                
          <br /><br /><br />
          * <em><strong>How To Tune The Guitar</strong></em> <br />- A guide to tuning your Guitar.
          <br /><br /><br />
          * <em><strong>Open Position and Moveable Chord Shapes</strong></em> <br />- Basic CAGED and EDCAG Chord Forms.
          <br /><br /><br />
          * <em><strong>Lead Patterns</strong></em> <br />- Common Lead Patterns.
          <br /><br /><br />
          * <em><strong>Pentatonic's</strong></em> <br />- Major, Minor and Blues.
          <br /><br /><br />
          * <em><strong>Arpeggio's</strong></em> <br />- Major, Minor, Diminished, Augmented, Major 7, Minor 7, Dominant 7.
          <br /><br /><br />
          * <em><strong>The Major Modes</strong></em> <br />- Major Scale Modes and patterns across the entire neck <br />(Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aeolian, Locrian).
          <br /><br /><br />
          * <em><strong>Diatonic Modal Avoid Notes and Colour Tones</strong></em> <br />- Notes to avoid in scales, and the colour tones.
          <br /><br />
          </ul>                      
                                
          </div>

<br />
<br />
<br />

<a href="#" id="slick-toggle1");">More Details</a>

<br />
<div id="myContent1" style="background-color: #CCC; padding: 10px;">          <strong>Cover The Fretboard : Theory and Application on Guitar</strong> - <strong>By Ashley Smith
                                </strong> 
                                
          <br />
          <br />
                                
          Contents: -
          <br /><br />
                               
          <ul>                      
          * <em><strong>About The Author</strong></em>
                                
          <br /><br /><br />
                                 
          * <em><strong>Study Sheet Notes</strong></em> <br />- Important info regarding some documents.                                
          <br /><br /><br />
                 
                                
          * <em><strong>Notes On The Fretboard</strong></em> <br />- An easy way to find and identify any note on the neck.
          <br /><br /><br />
                                
          * <em><strong>Warm Ups</strong></em> <br />- Before you start to play you must Warm Up.
                                
                                
          <br /><br /><br />
          * <em><strong>How To Tune The Guitar</strong></em> <br />- A guide to tuning your Guitar.
          <br /><br /><br />
          * <em><strong>Open Position and Moveable Chord Shapes</strong></em> <br />- Basic CAGED and EDCAG Chord Forms.
          <br /><br /><br />
          * <em><strong>Lead Patterns</strong></em> <br />- Common Lead Patterns.
          <br /><br /><br />
          * <em><strong>Pentatonic's</strong></em> <br />- Major, Minor and Blues.
          <br /><br /><br />
          * <em><strong>Arpeggio's</strong></em> <br />- Major, Minor, Diminished, Augmented, Major 7, Minor 7, Dominant 7.
          <br /><br /><br />
          * <em><strong>The Major Modes</strong></em> <br />- Major Scale Modes and patterns across the entire neck <br />(Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aeolian, Locrian).
          <br /><br /><br />
          * <em><strong>Diatonic Modal Avoid Notes and Colour Tones</strong></em> <br />- Notes to avoid in scales, and the colour tones.
          <br /><br />
          </ul>                      
                                
          </div>

Javascript

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#myContent').hide();
 // toggles the slickbox on clicking the noted link  
  $('#slick-toggle').click(function() {
    $('#myContent').slideToggle('normal');
      $(this).text($(this).text() == 'More Details' ? 'Hide Details' : 'More Details');
    return false;
      
 
      
  });
 
});

This how it looks…

Thanks very much in advance of a swift reply.

Ash

P.s. I got this code off the Internet and have no experience with Javascript, jQuery, CSS, HTML, etc… I’m a newbie.

Ashley_Smith · June 20, 2011, 12:15am

Hi,

I can get it to work if I duplicate the javascript again as show below, but surely there must be an easy way to select multiple targets from one function, so no need to write code numerous times?

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#myContent').hide();
 // toggles the slickbox on clicking the noted link  
  $('#slick-toggle').click(function() {
    $('#myContent').slideToggle('normal');
     
     if ($(this).html() === 'Hide Details') {
        $(this).html('More Details');
    } else {
        $(this).html('Hide Details');
    }
      
   
    return false;
      
 
      
  });
 
});

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#myContent1').hide();
 // toggles the slickbox on clicking the noted link  
  $('#slick-toggle1').click(function() {
    $('#myContent1').slideToggle('normal');
     
     if ($(this).html() === 'Hide Details') {
        $(this).html('More Details');
    } else {
        $(this).html('Hide Details');
    }
      
   
    return false;
      
 
      
  });
 
});

Paul_Wilkins · June 20, 2011, 4:44am

There is. You can put the code in a function that accepts the content and toggler as function parameters.


function initSlickbox(content, toggler) {
    // hides the slickbox as soon as the DOM is ready
    $(content).hide();
    // toggles the slickbox on clicking the noted link  
    $(toggler).click(function() {
        $(content).slideToggle('normal');
     
        if ($(this).html() === 'Hide Details') {
            $(this).html('More Details');
        } else {
            $(this).html('Hide Details');
        }
        return false;
    });
}

After which you can initialize one of them with:


initSlickbox('#myContent', '#slick-toggle');

Ashley_Smith · June 20, 2011, 10:42am

Hi,

Thank you for the swift reply, much appreciated.

I am unsure where to put the code in reference to the above however. Sorry, I’m a newbie

Do I need to change my div id’s to content/toggle?

I need all div’s to hide when the DOM loads, have them slide toggle open when one clicks on them individually, and have their ‘More Details’ name change to ‘Hide Details’ when opened, and back to the former when closed.

Thanks again for a step by step.

Ash

Paul_Wilkins · June 20, 2011, 10:53am

No, you don’t need to change any of those.

Would you like some hand-holding in regards to the changes that you need to make?

Ashley_Smith · June 20, 2011, 11:00am

Yes please, I think I’m just unsure where to place this function to call…

initSlickbox(‘#myContent’, ‘#slick-toggle’);

This is how it looks at the moment replacing code with yours minus the above…

My Code

Thanks again

Paul_Wilkins · June 20, 2011, 11:05am

You can place that and the function inside of the jQuery ready function that you started with in the original post.

And here’s a tip that could become useful for you - this jQuery callback method:


$(function() {
    ...
});

does exactly the same job as this jQuery ready handler:


$(document).ready(function() {
    ...
});

Ashley_Smith · June 20, 2011, 11:19am

It doesn’t seem to work in tests on this page…

My Code

I must be writing it out wrong, placing things in the wrong place.

Paul_Wilkins · June 20, 2011, 11:23am

If you’re making changes the the contents of the initSlickbox function, then you’re doing it wrong.

The initSlickbox function goes inside of the jQuery ready function. Immediately after the end of the initSlickbox function (but still inside of the jQuery ready function) is where you place the call to initCheckbox initializing it for the different pieces of content that you have.

Ashley_Smith · June 20, 2011, 11:27am

Sorry, I really don’t understand the terminology, it’s over my head.

Could you kindly write out the working code for me. I think I can then follow it visually.

Cheers

Paul_Wilkins · June 20, 2011, 11:29am

I would rather help you to understand what is going on here, so that you can come to learn more about how your code works.

Ashley_Smith · June 20, 2011, 11:35am

I understand and appreciate that.

Here’s what I have…

JS

function initSlickbox(content, toggler) {
    // hides the slickbox as soon as the DOM is ready
    $(content).hide();
    // toggles the slickbox on clicking the noted link  
    $(toggler).click(function() {
        $(content).slideToggle('normal');
     
        if ($(this).html() === 'Hide Details') {
            $(this).html('More Details');
        } else {
            $(this).html('Hide Details');
        }
        return false;
        
        initSlickbox('#myContent', '#slick-toggle');
    });
}

HTML

<a href="#" id="slick-toggle");">More Details</a>

<br />
<div id="myContent" style="background-color: #CCC; padding: 10px;">          <strong>Cover The Fretboard : Theory and Application on Guitar</strong> - <strong>By Ashley Smith
                                </strong> 
                                
          <br />
          <br />
                                
          Contents: -
          <br /><br />
                               
          <ul>                      
          * <em><strong>About The Author</strong></em>
                                
          <br /><br /><br />
                                 
          * <em><strong>Study Sheet Notes</strong></em> <br />- Important info regarding some documents.                                
          <br /><br /><br />
                 
                                
          * <em><strong>Notes On The Fretboard</strong></em> <br />- An easy way to find and identify any note on the neck.
          <br /><br />
          </ul>                      
                                
          </div>

<br />
<br />
<br />

<a href="#" id="slick-toggle1");">More Details</a>

<br />
<div id="myContent1" style="background-color: #CCC; padding: 10px;">          <strong>Cover The Fretboard : Theory and Application on Guitar</strong> - <strong>By Ashley Smith
                                </strong> 
                                
          <br />
          <br />
                                
          Contents: -
          <br /><br />
                               
          <ul>                      
          * <em><strong>About The Author</strong></em>
                                
          <br /><br /><br />
                                 
          * <em><strong>Study Sheet Notes</strong></em> <br />- Important info regarding some documents.                                
          <br /><br /><br />
                 
                                
          * <em><strong>Notes On The Fretboard</strong></em> <br />- An easy way to find and identify any note on the neck.
          <br /><br /><br />
                                
          * <em><strong>Warm Ups</strong></em> <br />- Before you start to play you must Warm Up.
                                
                                
          <br /><br /><br />
          * <em><strong>How To Tune The Guitar</strong></em> <br />- A guide to tuning your Guitar.
          <br /><br /><br />
          * <em><strong>Open Position and Moveable Chord Shapes</strong></em> <br />- Basic CAGED and EDCAG Chord Forms.
          <br /><br /><br />
          * <em><strong>Lead Patterns</strong></em> <br />- Common Lead Patterns.
          <br /><br /><br />
          * <em><strong>Pentatonic's</strong></em> <br />- Major, Minor and Blues.
          <br /><br /><br />
          * <em><strong>Arpeggio's</strong></em> <br />- Major, Minor, Diminished, Augmented, Major 7, Minor 7, Dominant 7.
          <br /><br /><br />
          * <em><strong>The Major Modes</strong></em> <br />- Major Scale Modes and patterns across the entire neck <br />(Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aeolian, Locrian).
          <br /><br /><br />
          * <em><strong>Diatonic Modal Avoid Notes and Colour Tones</strong></em> <br />- Notes to avoid in scales, and the colour tones.
          <br /><br />
          </ul>                      
                                
          </div>

At the moment the div’s are open and not closed by default, and when you click on ‘More Details’ it neither changes name or opens/closes div.

Please take a look at the example posted…

My Code

As you can see I have two div’s to toggle… slick-toggle and slick-toggle1 (myContent and myContent1)

Paul_Wilkins · June 20, 2011, 11:38am

The following line:
initSlickbox(‘#myContent’, ‘#slick-toggle’);
should not be anywhere inside of the initSlickbox function. Instead, that line needs to occur after the end of function.

Both the function and the line that invokes it still need to be wrapped by that jQuery wrapper that you started with in the original post.

Ashley_Smith · June 20, 2011, 11:45am

I have no clue what you mean by jQuery wrapper, I thought I was putting that line in there.

I now have…

function initSlickbox(content, toggler) {
// hides the slickbox as soon as the DOM is ready
$(content).hide();
// toggles the slickbox on clicking the noted link
$(toggler).click(function() {
$(content).slideToggle(‘normal’);

    if ($(this).html() === 'Hide Details') {
        $(this).html('More Details');
    } else {
        $(this).html('Hide Details');
    }
    return false;
    
    
});

}

initSlickbox(‘#myContent’, ‘#slick-toggle’);

Paul_Wilkins · June 20, 2011, 11:48am

Let’s stop here before carrying on then.

This part that wraps around the jQuery code, is commonly referred to as a jQuery wrapper.


$(document).ready(function() {
    ...
});

It’s purpose is to delay the execution of the code in the function, until after the DOM has loaded. At that time the script code in the function is then capable of working with the elements in the DOM.

Ashley_Smith · June 20, 2011, 11:50am

Ah, I see. Sorry that’s correct above. The code wasn’t updating correctly on the website I’m using to test.

Do I need to add an onLoad for the framework?

Here’s a picture…

Paul_Wilkins · June 20, 2011, 11:53am

You would use a jQuery wrapper to perform that task.

Ashley_Smith · June 20, 2011, 11:58am

Here’s what I have for my <head> at the top of my webpage…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Store</title>

<style media="all" type="text/css">@import url("menu/menu_style.css");</style>

<style type="text/css">

body 
{
	background-image: url(_images/background.jpg);
	background-position: left top;
}

.style1 {color: #FFFFFF}
</style>

<link rel='stylesheet' type='text/css' media='all' id="payloom-custom-css" href='Store_files/block_1/payloom.css?v=73' />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function initSlickbox(content, toggler) {
    // hides the slickbox as soon as the DOM is ready
    $(content).hide();
    // toggles the slickbox on clicking the noted link  
    $(toggler).click(function() {
        $(content).slideToggle('normal');
     
        if ($(this).html() === 'Hide Details') {
            $(this).html('More Details');
        } else {
            $(this).html('Hide Details');
        }
        return false;
        
        
    });
}

initSlickbox('#myContent', '#slick-toggle');
initSlickbox('#myContent1', '#slick-toggle1');
</script>

</head>

I think I need to change to jQuery 1.6 to get it to work as currently it shows div open.

How do I do that?

Paul_Wilkins · June 20, 2011, 12:01pm

The script code is currently being run before the sections that it’s supposed to manipulate have even begun to exist.

You need to put the script inside a jQuery wrapper, which will allow that code to run only after the content of the page has loaded.

Ashley_Smith · June 20, 2011, 12:08pm

Do I thus place this in the body?

function initSlickbox(content, toggler) {
// hides the slickbox as soon as the DOM is ready
$(content).hide();
// toggles the slickbox on clicking the noted link
$(toggler).click(function() {
$(content).slideToggle(‘normal’);

    if ($(this).html() === 'Hide Details') {
        $(this).html('More Details');
    } else {
        $(this).html('Hide Details');
    }
    return false;
    
    
});

}

initSlickbox(‘#myContent’, ‘#slick-toggle’);
initSlickbox(‘#myContent1’, ‘#slick-toggle1’);
</script>