-10

I have some content in p tag

<p>Some Content</p>

I also have two button 'Hide' and 'Show'.

<button>Hide</button>
<button>Show</button>

I want to hide the content if i click on 'Hide' button and show it again if clicked on 'Show' button. How to do it? Using JS or JQuery?

Weird Dude
  • 68
  • 8

2 Answers2

0

Yes it is a very basic question, use some basic jquery hide() and show() function. Check below snippet for reference.

$('#hide').click(function() {
  $('.content').hide();
});
$('#show').click(function() {
  $('.content').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="content">Some Content</p>

<button id="hide">Hide</button>
<button id="show">Show</button>
RaJesh RiJo
  • 4,302
  • 4
  • 25
  • 46
-2

You can do it using jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

<p>Some Content</p>

<button onclick=" $('p').hide();">Hide</button>
<button onclick=" $('p').show();">Show</button>
Upendra Joshi
  • 603
  • 6
  • 15
  • Thank you! this is the simplest answer among all, i don't know why someone voted you down. – Weird Dude Oct 16 '17 at 07:24
  • 2
    @WeirdDude this is voted down because it uses `onclick` attributes, which is the worst way to attach events and should be avoided where at all possible. All the other answers are better solutions that this. – Rory McCrossan Oct 16 '17 at 07:27