Marlon Malbrough Jr. Marlon Malbrough Jr. - 5 months ago 8
Javascript Question

Is there a way I can activate my .active for a div element using a separate div or list element?

opened navigation
enter image description here
closed navigation
enter image description here


I'm using the .active to create the transition from the hamburger menu to the x.
the problem i'm having is that when I click on an item within the navigation it doesn't transition back to the hamburger menu.

How can I activate the .active ? I got the navigation to slide back up when a link is clicked, but the x doesn't go back to its original state.

<div class="fullnavBtn" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div>


.fullnavBtn.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #00a0ca;
}

.fullnavBtn.active .middle {
opacity: 0;
background: #00a0ca;
}

.fullnavBtn.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #00a0ca;
}

$(document).ready(function () {
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#fullnav').toggleClass('open');
});
});

$(function () {
$('#toggletwo').click(function () {
$(this).toggleClass('active');
$('#fullnav').toggleClass('open');
});
});

Answer

You have not included the div#fullnav and the open class. Looking at the code, I recon the #fullnav is the navigation part which is outside the div#toggle. So you need to include a click event on the div#fullnav which will toggle these classes again.

$('#fullnav').click(function(){
    $(this).toggleClass('open');
    $('#toggle').toggleClass('active');
});

Hope this helps.