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.
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.
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.
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.
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.
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.
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.
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.
Now, add the following Jquery code which will animate your bars and give it attraction function. The code is below.
Demo for animated bars
This is the how you can create animated bars with jquery and javascript.
Step 1 : Add the following HTML CODE first, code is in the below block.
Now, you need the jquery or javascript code to toggle your bars, and following code will help you to do that.
Demo to toggle Icons
The Bar icon will be change to fa-times ( ) clicking on it.
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.
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.
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
Following text on red color will toggle on button click
This is demo content which will we are going to toggle with on click.
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 menu bars tutorial , i will be hide and show on clicking on bars. try it now.
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
The Bar icon will be change to fa-times ( ) clicking on it.
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.
0 Comments