Is there a better way?
Is there a better way?
Hi, I have a bunch of hidden div's with text in them that I 'slideDown' when it's corresponding nav 'div' item is either rolled over or clicked. I'm new to jquery (1 week) so I'm wondering if there is a cleaner way of writing this jQuery code. Can someone suggest a way?
My HTML:
- <div class='services-content-web'>
<div class='services-circle' style="margin-left:0px">Web</br>Design</div>
<div class='services-circle'>UI & UX</br>Design</div>
<div class='services-circle'>Custom</br>Wordpress</div>
<div class='services-circle'>Fully</br>Responsive</div>
</div>
<div class='services-text span9'>
<div class='services-text-item services-text-web'>
BLAH BLAH
</div>
<div class='services-text-item services-text-ui'>
BLAH BLAH
</div>
<div class='services-text-item services-text-wp'>
BLAH BLAH
</div>
<div class='services-text-item services-text-responsive'>
BLAH BLAH
</div>
My jQuery:
- var $web = $('.services-content-web div').eq(0);
var $ui = $('.services-content-web div').eq(1);
var $wp = $('.services-content-web div').eq(2);
var $responsive = $('.services-content-web div').eq(3);
//web and mobile text
$web.mouseover(function(){
$('.services-text-web').slideDown();
}); $web.click(function(){
$('.services-text-web').show();
});
$ui.mouseover(function(){
$('.services-text-ui').slideDown();
}); $ui.click(function(){
$('.services-text-ui').slideDown();
});
$wp.mouseover(function(){
$('.services-text-wp').slideDown();
}); $wp.click(function(){
$('.services-text-wp').slideDown();
});
$responsive.mouseover(function(){
$('.services-text-responsive').slideDown();
}); $responsive.click(function(){
$('.services-text-responsive').slideDown();
});