Show and Hide Elements using jQuery

How to show and hide elements using jQuery. When you click the mouse over some HTML element then some further information will show up, and when you click mouse out from that element, the further message automatically gets hidden, hereinbelow example I have utilized mouse click to hide and show the additional message, you can use any event as per your requirement.

Show and Hide elements jQuery

In the latest web design showing and hiding different elements on the web pages is a very common need, earlier we used to write display: none and display: block.

You can hide / show any HTML elements using the jQuery show() hide() methods.

Before utilizing any jQuery function you need to add the JQuery Script associate either from any CDN.

Now with only a few lines of code, you can write hide and show functionality using the jQuery method, you can hide or show any HTML element by calling them either Id or CSS class name, hereinbelow example we are hiding a div by calling their id “show” and the CSS class “soft-toggle”. Now let’s see the practical example below.

HTML Code:

<script src='https://code.jquery.com/jquery-1.7.2.js'></script>
<div class="soft">
<button id="#show" class="soft-toggle">Show</button>
</div>
<div id="show" style="display:none">
<p>Something is hidden By SoftCodeOn</p>
</div>
	

CSS Code:

<style>
.soft{text-align:center;}
.soft-toggle {
border: 1px solid #eee;
font-size:30px;
background:#000;
color:#fff;
width:200px;
height:100px;
border-radius:30px;
}
#show{text-align:center;}
</style>

JavaScript Code:

 <script id="rendered-js" >
$(document).ready(function () {
  $('.soft-toggle').click(function () {
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');

    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function () {
      if ($(this).css('display') == 'none') {
        //change the button label to be 'Show'
        toggle_switch.html('Show');
      } else {
        //change the button label to be 'Hide'
        toggle_switch.html('Hide');
      } }); });});
    </script>