CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5243894
user5243894

Reputation:

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.

Upvotes: 1

Views: 41

Answers (2)

BJ Black
BJ Black

Reputation: 2521

So when the first $(".fa-angle-right") selector runs, there is no such class item yet, so the click() isn't applied to anything. You create an element with that class later. So you really need to rerun those click() assignments after your class change. Like:

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

$(".socialArrow").click(function () {
    $(".arrowLeft").toggleClass("fa-angle-left fa-angle-right");
    setClick();
});

var wrapper = document.getElementById("socialWrapper");

This way, your click event gets reset every time the classes change.

Upvotes: 1

Blazeag
Blazeag

Reputation: 480

It should work with toggleClass, this way:

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

and CSS:

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

Upvotes: 0

Related Questions