Develop Reference

css - show element then animate it (trigger by jquery addClass) [duplicate]

This question already has answers here:
jQuery click toggle animation
(2 answers)
Closed 5 years ago.
i'm trying to animate an element with css.
First this element is hidden. A javascript event will show it and i want it to be animated.
The expected animation is letter-spacing -2px to letter-spacing 3px
$('#btn').click(function() {
$('#wrapper').addClass('animate');
});
#wrapper {
display: none;
/* I dont want the wrapper to be visible before the event */
}
#wrapper .message {
display: none; /* the message is not visible before the event */
letter-spacing: -2px;
transition: all 3s;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
}
#wrapper.animate {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
Thanks

I found the real issue:
When using a unique class to show AND change the property to animate, the browser will directly show the element with the new property (letter-spacing 3px).
To make it work, I can add a timeout.
I'm still waiting for a better solution if it exists
$('#btn').click(function() {
$('#wrapper').addClass('show');
window.setTimeout(function() {
$('.message').addClass('animate');
}, 500);
});
#wrapper {
display: none;
/* I dont want the wrapper to be visible before the event */
}
#wrapper .message {
display: none; /* the message is not visible before the event */
letter-spacing: -2px;
transition: all 3s;
}
#wrapper.show .message {
display: block;
}
#wrapper .message.animate {
letter-spacing: 3px;
}
#wrapper.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>

Have you tried to change the css value of display instead of add a class ?
$('#btn').click(function() {
$('#wrapper').css('display', 'block);
});
And look at this : https://www.w3schools.com/cssref/pr_class_visibility.asp
visibility property can help you.

Here you go with the solution https://jsfiddle.net/5h1dgfpu/
$('#btn').click(function() {
$('#wrapper').addClass('animate');
});
#wrapper .message {
display: block; /* the message is not visible before the event */
letter-spacing: -2px;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
visibility: visible;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>

You can move the item using margin in the css, and for delay, you can use setTimeOut function in javascript, like below
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
CSS
#wrapper .message {
display: none; /* the message is not visible before the event */
transition:all 300ms ease-in-out;
margin-left:0px;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
visibility: visible;
margin-left:30px;
}
JAVA-SCRIPT
$('#btn').click(function() {
$('#wrapper span').show();
setTimeout(function() {
$('#wrapper').addClass('animate');
}, 1000);
});
Here is a fiddle for you

$(document).ready(function(){
$("#click").click(function(){
$("#text").css("visibility","visible");
$("#text").animate({
opacity: '1'
});
});
});
#text{
font-family: monospace;
font-size: 25px;
display: block;
visibility: hidden;
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<p id="text"> Message to show and animate</p>
</div>
<button id="click">Click & Animate</button>

Javascript Jquery show/hide div better solution

I have two buttons here, and when I hover one of the button, it'll show a div with information(left to right). If the cursor is not on the buttons nor the div, it'll hide.
Here is my code, it works for me , but I want to know better solutions than mine. :D Thank you!
HTML:
<button id="Btn_Nav_Equipment" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)" ><span></span></button>
<button id="Btn_Nav_Report" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)"><span></span></button>
<div id='Panel_Equipment' style="display:none;" onmouseover="Set_Panel_Nav()"onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
<div id='Panel_Report' style="display:none;" onmouseover="Set_Panel_Nav()" onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
Javascript:
var Btn_Nav=false;
var Panel_Nav=false;
function Nav_Over(id){
var str=id.split('_');
var Panel_id='Panel_'+str[2];
$('#'+Panel_id).animate({width:'show'},300);
}
function Nav_Out(id){
var str=id.split('_');
var Panel_id='Panel_'+str[2];
if(( Btn_Nav==false)&&(Panel_Nav==false)){
$('#'+Panel_id).animate({width:'hide'},300);
}
}
function Nav_Panel_Out(id){
$('#'+id).animate({width:'hide'},300);
}
function Set_Btn_Nav(){
Btn_Nav=true;
}
function Set_Panel_Nav(){
Panel_Nav=true;
}
function Leave_Btn_Nav(){
Btn_Nav=false;
}
function Leave_Panel_Nav(){
Panel_Nav=false;
}

I would prefer doing such things by using HTML and CSS3 only.
button {
width: 40px;
height: 40px;
position: relative;
}
button > div.panel {
position: absolute;
z-index: 1;
top: 20px;
left: 40px;
transition: all .3s;
visibility: hidden;
opacity: 0;
width: 200px;
height: 80px;
background: white;
border: 2px solid;
}
button:hover > div.panel {
visibility: visible;
opacity: 1;
}
<button>
B1
<div class="panel" id="Panel_Equipment">Panel_Equipment</div>
</button>
<button>
B2
<div class="panel" id="Panel_Report">Panel_Report</div>
</button>

Trying to answer the question without being able to run your code so it would work, so I'm answering the text itself - the approach I'd take on this would be without javascript. It's rather simple, take a look!
.info-button {
padding: 5px 10px;
background: #afa;
display: inline-block;
position: relative;
}
.info-box {
display:none;
}
.info-button:hover .info-box {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 300px;
padding: 0 20px 10px;
background: #faa;
}
<div class="info-button">
<button>Hover me</button>
<div class="info-box">
<h1>More info</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="info-button">
<button>Hover me</button>
<div class="info-box">
<h1>More info</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

$('.btn').hover(function(){
$('#'+$(this).data('open')).animate({width:'200px'},300);
},function() {
$('#'+$(this).data('open')).animate({width:'0px'},300);
});
div {
width:0;
overflow:hidden;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-open="Panel_Equipment" ><span>asdada</span></button>
<button class="btn" data-open="Panel_Report"><span>sdasda</span></button>
<div id='Panel_Equipment'>text 1</div>
<div id='Panel_Report'> text 2</div>

Try with hover() function of jquery.And remove the inline mouseover
$('button').hover(function(){
$('#'+$(this).attr('data-target')).animate({width:'show'},300);
},function(){
$('.panel').animate({width:'hide'},300);
})
.panel{
width:100px;
height:50px;
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Btn_Nav_Equipment" data-target="Panel_Equipment">one<span></span></button>
<button id="Btn_Nav_Report" data-target="Panel_Report">two<span></span></button>
<div id='Panel_Equipment' class="panel" style="display:none;">Panel_Equipment</div>
<div id='Panel_Report' class="panel" style="display:none;">Panel_Report</div>

Here's a simple CSS3 solution, toggling a class on hover with jQuery :
let $info = $(".info")
$("button").hover( () => {
$info.addClass("onscreen")
}, () => {
$info.removeClass("onscreen")
})
button {
margin: 20px;
}
div.info {
position: absolute;
top: 50px;
width: 200px;
height: 200px;
background: #90ee90;
display: flex;
justify-content: center;
align-items: center;
transform : translateX(-100%);
opacity : 0;
transition: all 0.3s ease-in-out;
}
div.info.onscreen {
transform: translateX(0);
opacity : 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hover me</button>
<div class="info">
<span>Div content</span>
</div>

Try using the below solution.
$(document).on("mouseover",".btn,.panel",function(){
if($(this).hasClass("panel")){
$(this).removeClass("collapsed");
}
else{
var panel = $(this).attr("data-panel");
$("."+panel).removeClass("collapsed");
}
});
$(document).on("mouseout",".btn,.panel",function(){
$(".panel").addClass("collapsed");
});
.collapsed{
display:none;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<button class="btn_Equipment btn" data-panel="Panel_Equipment"><span>Equipment</span></button>
<button class="btn_Report btn" data-panel="Panel_Report"><span>Report</span></button>
<div class='Panel_Equipment collapsed panel'>Equipment Div </div>
<div class='Panel_Report collapsed panel'>Report Div</div>

text over img hover with jquery

I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).

$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>

You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>

Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>

Changing Z-Index Of Another Element On Click

in the code below I am trying to figure out how can I change "content"s z-index relatively to clicked "menu-item". I managed how to do this for menu items, but cannot find solution for the rest. In simple words I need to click #m1 and set Z-Index 10 for #c1 and so on.
HTML
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
CSS
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
JQuery
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
});
menu.click(function(){
menu.toggleClass("closed");
});
});
Working example: http://jsfiddle.net/8a3vqy5v/

No need to register multiple click events for the same element, they serve for your case same as a single binding.
You can hide and show the background content based on the menu index as follows within the click event, you can check the code snippet for full code:
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
Snippet :
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
menu.toggleClass("closed");
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
});
});
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>

You could get the index of the clicked .menu-item element and then select the corresponding .content element using the index with the .eq() method:
Updated Example
var $menu = $('.menu-item');
$menu.click(function() {
$(this).css('z-index', 11).siblings($menu).add('.content').css('z-index', '');
if (!$(this).hasClass('closed')) {
$('.content').eq($(this).index()).css('z-index', 10);
}
$menu.toggleClass("closed");
});
But since that creates a weird transition bug, you could use the code from this example instead. It essentially listens to the transitionend event.

if there is a fixed number of elements (ie: 4) you could simply throw 4 rules, one for each :
$('#m1').click(function() {
$('.content').css('z-index', '');
$('#c1').css('z-index', '11');
});
$('#m2').click(function() {
$('.content').css('z-index', '');
$('#c2').css('z-index', '11');
});
$('#m3').click(function() {
$('.content').css('z-index', '');
$('#c3').css('z-index', '11');
});
$('#m4').click(function() {
$('.content').css('z-index', '');
$('#c4').css('z-index', '11');
});
if you want a single rule that would apply to any #mx - #cx couple, you could also try to get the id of the element clicked as a string and manipulate the string in order to replace the first letter with a 'c'

Jquery multiple div toggle

OK. It won't take anybody long to work out that I am learning jQuery here and might have gone about this in THE most cack-handed way possible. That's why I'm here though.
I have been creating a "panel" based menu system that provides a number of different functions (menu, filter, search, basket and account). I have it 99% where I want to be. Indeed if you click on the menu icon (as an example) you will see the exact effect. Click it again and everything is perfect.
My problem comes when the user clicks on another icon with their initial "panel" open. Now you can see the gaps in my knowledge.
Please note the effect is on a different div for the panel and on the same div each time (main). Naturally it would be best if either:
a) when clicking on a new icon without closing a panel the jQuery closes the previous panel, removes the close-btn, slides back the main and then opens fires the new panel.
or
b) it closes the previous panel, removes the close-btn but keeps the main open (I think this is over complicating).
HTML
<div id="mainpanel">
<div class="menunav">
<div class="toggle menu-btn"></div>
<div class="toggle filter-btn"></div>
<div class="toggle search-btn"></div>
<div class="toggle basket-btn"></div>
<div class="toggle account-btn"></div>
</div>
</div>
<div class="togglepanel mainmenu">
menu here
</div>
<div class="togglepanel filter">
filter here
</div>
<div class="togglepanel search">
search here
</div>
<div class="togglepanel basket">
basket here
</div>
<div class="togglepanel account">
account here
</div>
<main>
content will be here
</main>
CSS
#mainpanel {
position: fixed;
display: table;
top: 0;
left: 0;
width: 125px;
height: 100%;
background: #206ba4;
vertical-align: middle;
z-index: 9999;}
main {
position: relative;
top: 0;
margin-left: 125px;
transform: translateX(0);
transform: translateY(0);
transition: transform .5s;}
.move {
transform: translateX(300px) !important;}
.menunav {
display: table-cell;
color: #fff;
z-index: 1001;
margin: 20px 0 0;
text-align: center;
vertical-align: middle;}
.menunav div {
display: block;
width: 100%;
margin: 0 0 30px;
text-align: center;}
.menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after {
font-family: FontAwesome;
content: "menu";
font-size: 1.8em;
font-weight: 200;
color: #fff;
display: block;
height: 1em;
width: 1em;
margin: 0 0 0 30%;
cursor: pointer;}
.filter-btn:after {
content: "filter";}
.search-btn:after {
content: "search";}
.basket-btn:after {
content: "basket";}
.account-btn:after {
content: "account";}
.close-btn:after {
content: "close";}
.mainmenu, .filter, .search, .basket, .account {
position: fixed;
width: 300px;
top: 0;
left: 125px;
height: 100%;
background: #54a4de;
transform: translateX(-100%);
transition: transform .5s;
z-index: -1;}
.expand {
transform: translateX(0px);}
jQuery
jQuery(function($){
$('.menu-btn').click(function(){
$('.mainmenu').toggleClass('expand')
$('main').toggleClass('move')
$('.menu-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.filter-btn' ).click(function(){
$('.filter').toggleClass('expand')
$('main').toggleClass('move')
$('.filter-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.search-btn' ).click(function(){
$('.search').toggleClass('expand')
$('main').toggleClass('move')
$('.search-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.basket-btn' ).click(function(){
$('.basket').toggleClass('expand')
$('main').toggleClass('move')
$('.basket-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.account-btn' ).click(function(){
$('.account').toggleClass('expand')
$('main').toggleClass('move')
$('.account-btn').toggleClass('close-btn')
})
})
Here is the jsfiddle
Many thanks, in advance, for any pointers....my head hurts!

DEMO HERE
Many redundant code in your attempt, but still a good attempt to achieve this. So below are my suggestions to achieve this.
Tips:
Do not include multiple jQuery(function as this is equivalent to $(document).ready function and its good if you have only one per
js file
Write a single common event to all the buttons and differentiate based on $(this) for each click that happens
Add an extra data-* attribute to your .toggle element, say here data-target, to target its corresponding panel-body
So below are some changes I made to your code..
HTML
<div class="menunav">
<!--data-target to each of its corresponding body class-->
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
</div>
JS
jQuery(function($){
//click event to one common class i.e toggle
$('.toggle').click(function(){
var target=$(this).data('target'); //get the clicked element's target property
$('.togglepanel').not($(target)).removeClass('expand');
//remove class from all the togglepanel elements except the current element's target
$('.toggle').removeClass('close-btn');
//general action in any scenario to remove close-btn
if($(target).hasClass('expand'))
{
//if target has expand class then remove it and do necessary changes
$(target).removeClass('expand')
$('main').removeClass('move')
$(this).removeClass('close-btn')
}
else
{
//else add necessary classes
$(target).addClass('expand')
$('main').addClass('move')
$(this).addClass('close-btn')
}
})
})

jQuery(function($){
$(document).on('click', '.toggle', function (){
// to close all open contents
$('.togglepanel').removeClass('expand');
$('main').removeClass('move');
var target = $(this).data("target");
if( $(this).hasClass('close-btn') ){
$('.toggle').toggleClass('close-btn', false);
$('main').toggleClass('move', false)
$(target).toggleClass('expand', false);
}else{
$('.toggle').toggleClass('close-btn', false);
$(this).toggleClass('close-btn', true);
$('main').toggleClass('move', true)
$(target).toggleClass('expand', true);
}
});
})
#mainpanel {
position: fixed;
display: table;
top: 0;
left: 0;
width: 125px;
height: 100%;
background: #206ba4;
vertical-align: middle;
z-index: 9999;
}
main {
position: relative;
top: 0;
margin-left: 125px;
transform: translateX(0);
transform: translateY(0);
transition: transform .5s;
}
.move {
transform: translateX(300px) !important;
}
.menunav {
display: table-cell;
color: #fff;
z-index: 1001;
margin: 20px 0 0;
text-align: center;
vertical-align: middle;
}
.menunav div {
display: block;
width: 100%;
margin: 0 0 30px;
text-align: center;
}
.menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after {
font-family: FontAwesome;
content: "menu";
font-size: 1.8em;
font-weight: 200;
color: #fff;
display: block;
height: 1em;
width: 1em;
margin: 0 0 0 30%;
cursor: pointer;
}
.filter-btn:after {
content: "filter";
}
.search-btn:after {
content: "search";
}
.basket-btn:after {
content: "basket";
}
.account-btn:after {
content: "account";
}
.close-btn:after {
content: "close";
}
}
.close-btn:after {
content: "\f00d";
}
.mainmenu, .filter, .search, .basket, .account {
position: fixed;
width: 300px;
top: 0;
left: 125px;
height: 100%;
background: #54a4de;
transform: translateX(-100%);
transition: transform .5s;
z-index: -1;
}
.expand {
transform: translateX(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainpanel">
<div class="menunav">
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
</div>
</div>
<div class="togglepanel mainmenu">
menu here
</div>
<div class="togglepanel filter">
filter here
</div>
<div class="togglepanel search">
search here
</div>
<div class="togglepanel basket">
basket here
</div>
<div class="togglepanel account">
account here
</div>
<main>
content will be here
</main>
You are actually doing a lot of codes which can be converted to a single line.
Instead of adding a click event on each buttons, try something like this:
First, add a data-target attribute to your buttons, something like:
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
And on your jQuery:
jQuery(function($){
$(document).on('click', '.toggle', function (){
// to close all open contents
$('.togglepanel').removeClass('expand');
$('main').removeClass('move');
var target = $(this).data("target");
if( $(this).hasClass('close-btn') ){
$('.toggle').toggleClass('close-btn', false);
$('main').toggleClass('move', false)
$(target).toggleClass('expand', false);
}else{
$('.toggle').toggleClass('close-btn', false);
$(this).toggleClass('close-btn', true);
$('main').toggleClass('move', true)
$(target).toggleClass('expand', true);
}
});
});