-2

I'm fairly new to Jquery and Javascript in general and I was wondering, how do I change text on a button after hiding something.

as far as i know, you hide something via this code:

$("element").click(function() {
    $("element2").hide("slow");
});

and to show something:

$("element").click(function() {
    $("element2").fadeIn("slow");
});

so what i want to do is have an article type thing, and when a "hide" button is pressed, it hides all the paragraph text, but leaves another button saying "show"

How do I accomplish this?

5
  • Have the hide function also show the button?
    – David
    Feb 9, 2013 at 12:37
  • yes, but like i said, i am new to javascript. So how do i accomplish this?
    – Brandyn
    Feb 9, 2013 at 12:38
  • Give us some HTML to work with... Feb 9, 2013 at 12:39
  • Insert a $("button").fadeIn("slow"); within the first function.
    – David
    Feb 9, 2013 at 12:39
  • can you make a jsfiddle to illustrate what are you trying to achieve?
    – Raptor
    Feb 9, 2013 at 12:41

4 Answers 4

2

You just need one button and change its text. Lets assume all the content is visible from the beginning. Add a button to your HTML and give it an ID so you can easily identify it:

<button id="toggleButton" type="button">Hide</button>

Then bind an event handler to the button which

  • toggles the visibility of the elements you want to show/hide and
  • changes the text content of the button

And here it is:

$('#toggleButton').click(function() {
    // toggle visibility if all p elements
    $('p').toggle();

    // Change text based on current text
    // If the current text is 'Hide' then we just hid the elements and
    // we have to change the text to 'Show' (and vice versa).
    $(this).text(function(i, current_text) {
        return current_text === 'Hide' ? 'Show' : 'Hide';
    });
});

DEMO

Reference: .click, .toggle, .text, conditional operator.


You have to adjust the selector to only match elements you really want to hide, but jQuery has great documentation about all possible selectors.

jQuery's documentation is pretty extensive and spending some time just reading through is worthwhile.

Since you are just starting, I recommend to read http://eloquentjavascript.net/ and/or the MDN JavaScript Guide, and the jQuery tutorial (in that order).

1

To Hide:

$("element").click(function() {
    $("element2").hide("slow");
    $("element").text('Show');
});

To Show:

$("element").click(function() {
        $("element2").fadeIn("slow");
        $("element").text('Hide');
    });
5
  • OP wants to leave a button shown when $('#element2') is hidden, but change the text to Show
    – Raptor
    Feb 9, 2013 at 12:42
  • This is example is incomplete... are both event handlers bound to the same element? If yes, both will be executed at the same time and won't create the desired result. Feb 9, 2013 at 12:44
  • I am assuming 'element' is the button the op is clicking to hide 'element2' from the code he posted. If that is the case then we just need to change 'element' text to give op the show/hide functionality like I have done. If the case is different, i would ask op to clarify more or post a fiddle
    – codetantra
    Feb 9, 2013 at 12:47
  • But how do you know which click you have to show or hide the element? If you bind two event handlers, both will be executed for a single click. So you are hiding the elements first and then showing them again on each click. You have to hide and show on alternating clicks. Feb 9, 2013 at 12:49
  • you are right felix. I missed that point. We have to check for the state of the element. Your solution is the right one.
    – codetantra
    Feb 9, 2013 at 12:55
1

Change button value like

    $("element").click(function() {
    $("element2").hide("slow");
    $("#btnID").prop('value', 'Show');
    }); 

    $("element").click(function() {
        $("element2").fadeIn("slow");
    $("#btnID").prop('value', 'Hide');
    });
0

I usually have two buttons, one with text show and another with hide text, then when you click in one of them show one and make all the stuff necessary and hide it shelf.

HTML:

<a href="#" id="bshow" style="display:block"> Show </a>
<a href="#" id="bhide" style="display:none"> Hide </a>
<p id="textshow"  style="display:none"> lorem ipsum</p>

Javascript:

$('#bshow').click(function() {
    $('#bhide').fadeIn();
    $('#textshow').fadeIn();
    $(this).hide();
});

I think this jsFiddle can help you:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.