javascript - jquery and css solution to toggle showhide with text in the html - Stack Overflow

So I created the following jquery that shows/hides a div.

$(document).ready(function(){
  $("#me").hide();
  $("#hide").click(function(){
    $("#me").hide();
  });
  $("#show").click(function(){
    $("#me").show();
  });
});

This is some text Hide Show

/ It works fine. But I need to make it work so that instead of having a separate show and hide text, I need to toggle show and hide. But main problem is I dont want to have the text in the javascript file for internationalization purposes. It's ok if the text resides in the html. Can someone help me with this?

So I created the following jquery that shows/hides a div.

$(document).ready(function(){
  $("#me").hide();
  $("#hide").click(function(){
    $("#me").hide();
  });
  $("#show").click(function(){
    $("#me").show();
  });
});

This is some text Hide Show

http://jsfiddle/6DTeq/7/ It works fine. But I need to make it work so that instead of having a separate show and hide text, I need to toggle show and hide. But main problem is I dont want to have the text in the javascript file for internationalization purposes. It's ok if the text resides in the html. Can someone help me with this?

• javascript
• css
• jquery-ui
• jquery

Share Improve this question Follow asked Jun 19, 2013 at 21:43 MichealMicheal 2,3221010 gold badges5252 silver badges9696 bronze badges 1

• There is a toggle function in jQuery – cssyphus Commented Jun 19, 2013 at 21:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Html :

<div id="me"> This is some text</div>
<div id="toggle">toggle</div>

Js:

$("#toggle").click(function(){
  $("#me").toggle();
});

Demo -----> http://jsfiddle/6DTeq/8/

Updated fiddle -----> http://jsfiddle/6DTeq/13/

Try this

$(document).ready(function(){
  $("#me").hide();
  $("#hide").click(function(){
      $("#me").toggle();
      $(this).text(function(i, val) {
          return val === 'Show' ? 'Hide' : 'Show';
      });
  });
});

Check Fiddle

<div id="me" style="display:none;"> This is some text</div>
<div id="clickContainer">
    <div id="hide" style="display:none;">Hide</div>
    <div id="show">Show</div>
</div>

$(document).ready(function(){
    $("#clickContainer").click(function(){
        $("#me").toggle();
        $("#hide").toggle();
        $("#show").toggle();
    });
})

Try that:

http://jsfiddle/6DTeq/10/

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#me").toggle();
        $(this).text(function(){return $('#me:visible').length?'Hide':'Show'});
    }).triggerHandler('click');
});