0

I have posted a question on this forum and a moderator asked to create a question and link to the original post.

This is the post. toggle show/hide div with button?

The question is regarding the solution provided by NAVEED answered Dec 24 '10 at 19:50.

I want know how can I use only the word "open" in the button when the div is closed and "close" when the div is open? I mean, switching the words open and close on the button.

Thank you.

Community
  • 1
  • 1
Bob Cab
  • 11
  • 4
  • I don't think it is duplicated. Other questions are asking for a single event while I'm asking for two events, one open, other close. If you know where I can find the answer let me know I really appreciate your time. – Bob Cab Mar 27 '16 at 05:21

1 Answers1

0

Using the following HTML Naveed used.

HTML

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

You can then use the following JS to both toggle a show/hide class on your button and change the text.

JS

    var btn = $('#hideshow')
    var content = $('#content')

    btn.click( function() ) {
         if (content.hasClass("show"){
             content.removeClass('show');
             btn.text('open');
         } else{
             content.addClass('show');
             btn.text('close');
         }
    });

CSS

#content{
  display: none;
}
#content.show{
  display: block;
}
hostingutilities.com
  • 8,894
  • 3
  • 41
  • 51
  • I want clarify to those marking questions as duplicated to read carefully the post before making a judgement. The post indicate at top refers to a code using a .png image. I'm asking to implement the code with a button. – Bob Cab Mar 27 '16 at 05:25
  • Whoops looks like I had mismatched paranthesis. Here is a fiddle of it working https://jsfiddle.net/6zmtd0vf/ – hostingutilities.com Mar 27 '16 at 05:28
  • This is working. Thank you! – Bob Cab Mar 27 '16 at 05:34
  • Awesome. Glad we where able to get it working. Also if you could click on the little checkmark by this answer to accept it, that would be great. – hostingutilities.com Mar 27 '16 at 05:40