[jQuery] Slide in - slide out not working, am i silly?
Hi,
No idea what I'm doing wrong, I hope its not something very simple....
I want to be able to click on the button with class btn slide and
expand the "extra" Div, here is the CSS for hextra
.extra{
overflow:hidden;
color:#349ACB;
clear:both;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#E6EBF1;
border:2px solid #2297D5;
*float:left;
display: none;
}
here is the JS
here is my code
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#extra").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
+ html
<div class="waffless-resturent"><img src="image/plua2.jpg"
class="btn-slide" alt="" /> test<span class="waffless-
resturent2"> 119 sdfdf</span></div>
<div class="crok3">Dubdfdfdf2</div>
<div class="crok1">01 554556663</div>
<div class="crok2">American</div>
<div class="crok"><img src="image/star2.jpg" alt=""
width="31" height="16" /></div>
<div class="crok4"><img src="image/my.jpg" alt="" width="16"
height="17" /></div>
<div class="frends">0</div>
<div class="extra">
<div id="img-map">
<div class="img-viw"> <img src="image/zoom.jpg"
alt="click here" />
<div class="map-deraction">Img</div>
</div>
<div class="img-viw2"> <img src="image/zoom.jpg"
alt="click here" />
<div class="map-deraction"> Map + Directions</div>
</div>
<div class="view-more-image"><a href="#">VIEW MORE IMAGES
+</a></div>
<div class="view-more-image2"><a href="#">VIEW LARGE MAP
+</a></div>
</div>
<div id="opning-hours">
<div class="hours-opning-time">Opening Hours<br />
<span class="hours-opning-time2">Lunch: Mon-Sun
12.00-16.00<br />
Evening:18.00-21.30<br />
</span></div>
<div class="hours-opning-time-menu">View menu & Our
news:</div>
<div class="images-menu"><img src="image/menus.jpg"
alt="menu" width="48" height="31" /></div>
<div class="images-menu"><img src="image/news.jpg"
alt="news" width="48" height="31" /></div>
<div class="hours-opning-time-menu">Website:<span
class="hours-opning-time2">www.123.ie</span></div>
<div class="clear"></div>
<div class="hours-opning-time-menu">Capacity: 40</div>
<div class="clear"></div>
<div class="hours-opning-time-
menu">Facilities </div>
<div class="faclities-friend"><img src="image/frend.jpg"
alt="friends" /></div>
<div class="faclities-friend"><img src="image/somking.jpg"
alt="smoking" /></div>
<div class="faclities-friend"><img src="image/bar.jpg"
alt="bars" /></div>
<div class="faclities-friend"><img src="image/card.jpg"
alt="Card" /></div>
<div class="faclities-friend"><img src="image/outside.jpg"
alt="out side" /></div>
<!-- <div class="faclities-friend"><img src="image/
plan.jpg" alt="plan" /></div> -->
</div>
</div>
Please help if you can, I'm desperate!!!