Firstly, I am not fluent in English. Secondly, my issue pertains to "toggleClass".
I am a newbie to jQuery and JavaScript, and here is my code snippet:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.humburger').click(function(){
$('#sidbar').toggleClass('side-lg-tog');
$('#contenu').toggleClass('contenu-lg-tog');
});
});
</script>
<style>
body {
margin:0; padding:0;
}
#entete {
height:50px;
background-color:#197aac;
position:relative;
}
.humburger {
position:absolute;
top:17px;
left:15px;
cursor:pointer;
}
.humburger span {
background-color:#fff;
display:block;
height:2px;
width:20px;
margin-bottom:3px;
}
#sidbar {
width:300px;
height:100%;
background-color:#e7e7e7;
border-right:1px solid #ccc;
position:absolute;
top:50px;
left:0;
transition:transform .3s ease-in-out;
}
.side-lg-tog{transform:translate(-240px, 0);}
.contenu-lg-tog {margin-left:60px;!important}
#contenu {
background-color:#eff8fd;
height:100%;
margin-left:300px;
padding:15px 30px;
transition:margin-left .3s ease-in-out;
}
.pad-contenu {
border:1px solid #ccc;
min-height:300px;
background-color:#fff;
}
@media (max-width:767px){
#sidbar{transform:translate(-300px, 0);color:red;}
#contenu {margin-left:0;}
}
</style>
</head>
<body>
<div id="entete">
<div class="humburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="sidbar">test</div>
<div id="toggle-btn"></div>
<div id="contenu">
<div class="pad-contenu">
</div>
</div>
</body>
</html>
My problem arises when I click on the humburger icon. The sidebar transitions perfectly using the new class side-lg-tog
$('#sidbar').toggleClass('side-lg-tog');margin-left:300px;. I would like it to be 60px.
Thank you and apologies for any language errors, as French is my second language.