Kraftinger Lp Kraftinger Lp - 3 months ago 9
Javascript Question

Javascript only hides element

I want to make social sidebar, which can be hidden when clicked on arrow.It hides by margin-left. I tried toggling classes, if statements, but it only hides it and doesn’t show after second click. This is my code now:

javascript-jQuery:

$(".socialArrow").click(function () {
$(".arrowLeft").toggleClass("fa-angle-left fa-angle-right");
});
var wrapper = document.getElementById("socialWrapper");
$(".fa-angle-left").click(function () {
wrapper.style.marginLeft = ("-80px");
});

$(".fa-angle-right").click(function () {
wrapper.style.marginLeft = ("0px");
});


html:

<div class="socialContainer">
<ul id="socialWrapper">
...some links...
</ul>

<span class="socialArrow">
<i class="arrowLeft fa fa-angle-left"></i>
</span>

</div>


Any idea how to fix it?

Sorry for my English , I’m not from UK/US.

Answer

It should work with toggleClass, this way:

$(".socialArrow").click(function () {
    $("#socialWrapper").toggleClass("closed");
});

and CSS:

#socialWrapper.closed {
    margin-left: -80px;
}
Comments