ToggleSlide Implementation

Hi All,

First off, just want to start by saying that I am not exactly well versed in jQuery. I've been trying to design a drop down nav menu that is toggled based on a click of a link ('Golf Balls'). See my info below.

URL: www.rememberyourballs.com
Site: WordPress using Thesis 2.1

I've come to a point where I've gotten it so that when you click 'Golf Balls', the sub-nav is toggled. However, it automatically gets hidden again. I want the functionality to be a user must click to show, and click to hide (something along the lines of harrys.com)

Code:

JQUERY:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

<script src="//code.jquery.com/jquery-1.10.2.js">

<script>
$(document).ready(function(){
$('.dc-mega').click(function(){
$('.golf_ball_menu').slideToggle('fast');
});
});
</script>

HTML:

//toplink
<div class="dc-mega">

<p>

<a class="dc-mega" href="#">
<br>
Golf Balls
<br>
</a>
</p>
</div>

//golfballmenu
<section class="golf_ball_menu">

<div class="fixed_width">

<div class="nav_item">
<a href="/used-golf-balls/">Used Golf Balls</a>
</div>

<div class="nav_item">
<a href="/new-golf-balls/">New Golf Balls</a>
</div>

<div class="nav_item">
<a href="/give-a-golf-gift/">Give a Golf Gift</a>
</div>
</div>
</section>

CSS:

.dc-mega {
display: inline-block;
background: #EEE;
border: 1px solid #CCC;
padding: 10px;
text-decoration: none;
}
.dc-mega:hover {
text-decoration: underline;
}
.golf_ball_menu {
display: none;
margin-top: 10px;
background: #262626;
height: 120px;
}
.nav_item {
margin-top: 45px;
display: inline-block;
width: 33%;
text-align: center;
}
.nav_item a {
color: #EEEEEE;
font-weight: bold;
text-decoration: none;
}
.nav_item a:hover {
text-decoration: underline;
}

 

Just a small fix you need to add return false;

<script>
$(document).ready(function(){
$('.dc-mega').click(function(){
$('.golf_ball_menu').slideToggle('fast');
return false;
});
});
</script>

Hope this could solve your issue.

 

Ah. Thank you SO MUCH for your help humanwebs; this definitely fixed the issue.

You're the best.