Luka Kerr Luka Kerr - 4 months ago 32
CSS Question

jQuery Nav Sliding Underline Modify

I currently have a simple navbar that has an up arrow underneath it, that slides when one of the nav titles is clicked on. The arrow starts inbetween two nav titles. When a nav title is clicked on, a bit of text slides in aswell.

I want it so that when a nav title is clicked on again, the arrow underneath slides back to its starting position (which is a css class called

uparrow
). I am not sure how to do this

JSFIDDLE

Here is the html:

<div id="bottom">
<div class="middle">
<div class="titles">
<h3>
<a class="webdesign">Web Design</a>
<a class="appdesign">Application Development</a>
</h3>
</div>
<img class="uparrow" src="img/uparrow.png">
<hr>
</div>
<div class="bottom">
<h4>Web Design </h4>
<p>Blah</p>
</div>
<div class="bottom2">
<h4>Application Development</h4>
<p>Blah</p>
</div>
</div>


Here is the css for the arrows:

.uparrow {
width:20px;
}

.uparrowleft {
margin-right:180px;
transition: 0.5s ease;
}

.uparrowright {
margin-left:315px;
transition: 0.5s ease;
}


And here is the jQuery for the arrow sliding:

$('.webdesign').click(function() {
$('.bottom2').hide(500);
$('.bottom').toggle(500);
$('.uparrow').removeClass('uparrowright');
$('.uparrow').addClass('uparrowleft');
});

$('.appdesign').click(function() {
$('.bottom').hide(500);
$('.bottom2').toggle(500);
$('.uparrow').removeClass('uparrowleft');
$('.uparrow').addClass('uparrowright');
});

Answer

Is this what you expect?

Jsfiddle: https://jsfiddle.net/ek6ktsLg/

The change is toggleClass on the uparrowleft and uparrowright

$('.webdesign').click(function() {
    $('.bottom2').hide(500);
    $('.bottom').toggle(500);
    $('.uparrow').removeClass('uparrowright');
    $('.uparrow').toggleClass('uparrowleft');
});

$('.appdesign').click(function() {
    $('.bottom').hide(500);
    $('.bottom2').toggle(500);
    $('.uparrow').removeClass('uparrowleft');
    $('.uparrow').toggleClass('uparrowright')
});
Comments