Hey everyone,
I'm at a stand still at this bit of code. Ultimately, I want to "expand"/slide down a class to show the rest of the hidden content (the list items with the class of ".hide") inside of that containing div. Sliding down the prices, hr line, and the "Get Started" button so that the content that would now be shown at hover, but at sliding back up the now shown content, would slide back to its original state when "not" on hover.
I thought that by either taking away the class via jquery would solve the issue, but no. Not sure if the Jquery is needed. Seems like this can be achieved by simply using CSS with display: none, and then display: block, but that doesn't seem to work.
Here's what I have for the HTML, CSS and Jquery. Any help or ideas in the right direction to help me figure this out would be wonderful and very appreciative.
CSS:
.expanding{
transition: height 300ms ease-in-out;
-webkit-transition: height 300ms ease-in-out;
height: 512px;
}
.expanding:hover{
height: 624px;
}
li.hide{
display: none;
}
li.hide:hover{
display: block;
}HTML:
<div class="col-md-3 col-sm-6">
<div class="price-box expanding">
<h2 class="pricing-plan">Enchanted Evening Package</h2>
<ul class="pricing-info">
<li>Some Stuff...</li>
<li>Some more Stuff</li>
<li>Some more Stuff...</li>
<li>Some More Stuff....</li>
<li>Some More Content...</li>
<li>Some More Content....</li>
<li class="hide">Hidden Content</li>
<li class="hide">Some More Hidden Content</li>
<li class="hide">Some More Hidden Content....</li>
</ul>
<hr>
<div class="price"><sup class="currency">$</sup>1,500<small>/4hr</small></div>
<div class="price"><sup class="currency">$</sup>2,500<small>/6hr</small></div>
<div class="price"><sup class="currency">$</sup>3,500<small>/8hr</small></div><br/>
<a href="#" class="btn btn-default btn-sm">Get started</a>
</div>
</div>Jquery:
<script>
$(document).ready(function(){
$(".expanding").hover(function(){
$( "li" ).removeClass( "hide" );
});
});
</script>