Issue with showing/hiding content on hover in css and jquery

[WebDevGuy32145]

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>

[gentlemedia]

In order to show/hide the content with a CSS transition you should use max-height instead of height and set overflow to hidden.

See n example here: https://codepen.io/gentlemedia/pen/QBYOWd

[WebDevGuy32145]

@gentlemedia, In your demo, wouldn't the "div:first-child" element need to be "div.second-child" considering that the first "p" element is what's being hidden, meaning that the h2 element is the first-child?

Sorry, this is slightly confusing to me. It does seem to be the solution to my question, I just need to understand this logic now :)

[WebDevGuy32145]

@gentlemedia, Please dismiss my previous comment. I wasn't fully awake yet. I understand what child elements target. I took your logic and implemented it into my own code and it works like a charm! Thank you for setting me straight :)