How to use toggle class in jquery?

Toggle class example in jquery:

Toggle means that adding or removing, up and down, on and off. here is that one class adding or removing when we click on any element (where we use our toggle method) then it add class as we give and when again click on the same then it will remove. This is a function of the toggleclass(), you will be more get with below example:

Toggle class example with CSS and jquery.

    <style type="text/css">

        .showHide .showClick::after{content: 'Hide'}

        .showClick::after{content: 'Show'}

        .showPannel{ display: none;}

        .activeSS{display: block}

    </style>

<div class="mainContainerSec">

        In this guide, we will cover:<span class="showClick"></span>

    </div>

    <div class="showPannel">

            Your text will be here

    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>

        $(function(){

            $('.showClick').click(function(){

                $('.showPannel').toggleClass('activeSS');

                $(this).parent('.mainContainerSec').toggleClass('showHide');

            });

        });

    </script>

.............................................................................

Toggle class example with ternary operator.

<style type="text/css">

.showPannel{ display: none;}

.activeSS{display: block}

</style>

<div class="mainContainerSec">

        In this guide, we will cover:<span class="showClick">Show</span>

    </div>

    <div class="showPannel">

            Your text will be here

    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>

        $(function(){

            $('.showClick').click(function(){

                $('.showPannel').toggleClass('activeSS');

                $(this).text() == "Show" ? $(this).text("Hide") : $(this).text("Show");

            });

        });

    </script>

.............................................................................

  

Toggle class example with if else.

<script>

        $(function(){

            $('.showClick').click(function(){

                $('.showPannel').toggleClass('activeSS');

                    if($(this).text() == "Show"){

                            $(this).text("Hide")

                    }else{

                        $(this).text("Show")

                    }

            });

        });

    </script>

Output show as screenshot: