Jquery remove class issue

Question

I have created a global Jquery to add and remove class toggle function for various elements through my page. JsFiddle

The toggle class displays a hidden div which overlays the original div. Within the overlay i have created a close button is an attempt to remove the hidden div.

I am having slight issue in removing a the toggle class with the close button. Below is my code

$('.details-btn').click(function(){
            var $panel = $(this).closest('.square').find('.i-panel');
            if ($panel.hasClass('inactive')) {
                $('.square .i-panel').addClass('inactive');
                $panel.removeClass('inactive');
                } else {
                    $panel.addClass('inactive');
                }
        });

HTML

<div class="item-container small-6 relative">

                    <div class="square">

                        <span class="exclusive-tag-3 cap-txt absolute">
                        <p class="absolute">New</p>
                        </span>

                        <img src="http://myjpg">



                        <div class="item-details">




                            <ul>
                                <li class="small-5">
                                    <p>ICON</p>
                                </li>

                                <!-- INFO BTN -->

                                <li class="small-5 details-btn">
                                    <i class="fa fa-info-circle">OPEN</i>
                                </li>

                                <!-- INFO BTN ENDS -->
                            </ul>

                        </div>



                        <div class="d-hidden i-panel inactive absolute">


                            <article class="global-padding">



                            </article>

                            <footer class="absolute">

                                <ul class="global-padding">

                                    <li class="small-5">
                                        <a>
                                            <p class="heading-5">Details</p>
                                        </a>
                                    </li>
                                    <li class="small-3">
                                        <a>
                                            <p class="heading-5">
                                                <i class="fa fa-envelope-o">SEND</i>
                                            </p>
                                        </a>
                                        </li>
                                    <li class="small-3">
                                        <a>
                                            <p class="heading-5">
                                                <i class="fa fa-times">close</i>
                                            </p>
                                        </a>
                                    </li>

                                </ul>

                            </footer>

                        </div>



                    </div> <!-- SQUARE ENDS HERE -->


                </div> <!-- ITEM-CONTAINER ELEMENTS ENDS -->

Answer 1

Your Jquery function is triggered when you click on an element that has the class details-btn on it, therefore you must add class details-btn to your close button like this:

<i class="fa fa-times details-btn">close</i>

Answer 2

You don't have a click handler for the close button, so only the open button is triggering the class toggle, you need to add the class details-btn to the close button as well or create a new click handler.

Try replacing

<p class="heading-5">
  <i class="fa fa-times">close</i>
</p>

with

<p class="heading-5 details-btn">
  <i class="fa fa-times">close</i>
</p>