Javascript is a high-level programming language. It is used for as the part of web pages to create and make it dynamic. as we have already explained about the javasript in previous posts, You can do many task with javascript such as create functions, create plugins etc.

Jquery is the javascript library disigned to simplify the script of HTML. Jquey is based on open-source and free. It is used to simplify and make the javascript code easier. Jquery can do what javascript do because jquery makes easy and has less code than javascript. In all, All the functions you want to make in HTML page to operate you need Javascript or Jquery.

Jquery and javascript

In this post, We are going to share you the basic but usefull idea to how you can toggle the content with the use of Javascript and Jquery. This might be helpfull for begginer if you make menu to work with on Click.


Below is the some basic ideas and piece of codes how it works.

#Toggle content with On Click

Now, we will start the the toggling content with javascript and jquery here, before that you need to script code for jquery paste the follwing code above </head> in your index.

  
   
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
  
 

STEP 1 : Now write the html code which we will toggle with jquery or javascript. Add the simple demo paragraph and a simple button and try to toggle it.

  
<div class="demo-item" id="demo-item">
<p>
Following text on red color will toggle on button click</p>
</p>
<p id="demo-paragraph" style="color: red;font-style: italic;margin:10px 0">This is demo content which will we are going to toggle with on click.
</p>
<button id="demo-button" value="Toggle Now">Toggle Now</button>
</div>
  
 

Step 2 : Add the following Javascript or Jquery to toggle your content on click. You content will toggle hide and show with the button onclick. Here is the way to do that with.

 
<script type="text/javascript">
//jquery
$(document).ready(function(){
$('#demo-button').click(function(){
$('#demo-paragraph').toggle();
});
});

//javascript
function toggle(){
var a = document.getElementById('demo-paragraph');
if(a.style.display=='none'){
a.style.display='block';
}
else {
a.style.display='none';
}
}
</script>
 

You can actually toggle the content with creating another class and toggle the content here is the how you can do that. Add the following CSS and you will able to toggle.

 
/** We are creating <b style="color: #2475fc">Class</b> and going to toggle it with onclick.**/

/* create class toggle */
.toggle .demo-paragraph {
display:none
}
 

Step 3 : And make a function like following code which will toggle your content as before. check the following code and try it right away.

 
//Jquery to toggle with class
$('#demo-button').click(function(){
$('.demo-item').toggleClass('toggle');
})
//javascript to toggle class created 

function toggle(){
var a = document.getElementById('demo-item') //item-inside demo with id #demo-paragraph will toggle
a.classList.toggle('toggle');
} 

Demo







Using same concept you can create animated menu icon and toggle the contect on click, Let's see the code below how it will be created work. Add the HTML code to your index. code is below.

 
<div class=quot;demo-itemquot;>
<div class=quot;animated-barsquot;>
<span class=quot;bar-1quot;></span>
<span class=quot;bar-2quot;></span>
<span class=quot;bar-3quot;></span>
</div>
<div class=quot;item-to-togglequot;>
<p>
This is menu bars tutorial , i will be hide and show on clicking on bars. try it now.
</p>
</div>
</div>
 

After that add the following css in to your html code to style the bars and add animation to your bars. here is the code copy the code from block below.

 
/** bars **/
.animated-bars {
padding: 10px;
display:block
}
.animated-bars span {
/* style all span */
background: #2475fc;
margin: 5px 0;
height: 4px;
width: 36px;
display:block;
transition:0.5s ease
}

/* create animation */
.add-animation .bar-1 {
transform: rotate(-45deg) translate(-8px,3px);
-webkit-transform:rotate(-45deg) translate(-8px,3px);
}
.add-animation .bar-2 {
opacity: 0
}
.add-animation .bar-3 {
transform: rotate(45deg) translate(-8px,-3px);
-webkit-transform:rotate(45deg) translate(-8px,-3px);
}
 

Now, add the following Jquery code which will animate your bars and give it attraction function. The code is below.

 
//Animated bars with span
$('.animated-bars').click(function(){
$(this).toggleClass('add-animation');
//add it to toggle content 
$('.item-to-toggle p').toggle()
}) 

Demo for animated bars


This is the how you can create animated bars with jquery and javascript.

How to toggle font-awesome icon with Jquery ?

If you don't like to use the animated bars then you can use font-awesome and toggle icon between two using jqyery here is the way to do that.
Step 1 : Add the following HTML CODE first, code is in the below block.

<!--bars with fontawesome-->
<div class="fw-bars">
<span class="fa fa-bars" id="fa-bars"></span>
</div>

Now, you need the jquery or javascript code to toggle your bars, and following code will help you to do that.

 
//jQuery to toggle icons
$('#fa-bars').click(function(){
$(this).toggleClass('fa-bars fa-times');
})
 

Demo to toggle Icons


NOTE : Without adding fontAwesome script you won't able to use the icons so you need to add the following fontAwesome script library in your <head> </head> of HTML.

 
<!--Fontawesome Script-->

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
 

This is all for today, Here you learnt about the toggle content with Jquery or Javascript. As well as you learnt about the create animated menu icon and toggle the fontAwesome icons with jQuery. Hope this helped you if you are beginner.