JQUERY HIDE() HIDES WHAT IT SHOULDN'T

Brad Pitt

Total Post:61

Points:429
Posted by  Brad Pitt
 1103  View(s)
Ratings:
Rate this:

I've got problem... jQuery should only hide divs under each h2, but it hides those h2 aswell... What should I do?

<!DOCTYPE>

<html>

<head>

    <title>Yolo</title>

    <script src="js/jquery-1.11.2.min.js"></script>

</head>

<body>

    <main>

        <div class="faq">

            <h2>Opcja 1</h2>

            <div class="answer">

                <p>Paragraph under option 1!</p>

            </div>

            <h2>Opcja 2</h2>

            <div class="answer">

                <p>Paragraph under option 2!</p>

            </div>

            <h2>Opcja 3</h2>

            <div class="answer">

                <p>Paragraph under option 3!</p>

            </div>

        </div>

    </main>

 

    <script src="js/jquery-1.11.2.min.js"></script>

    <script src="js/szkrypt.js"></script>

</body>

</html>

And there is jQuery. I did this via course in book, there it worked, maybe there was something with css classes there... Or maybe it was that, it was done under older version of jQuery.

$(document).ready(function() {

 $('.answer').hide();

 $('.faq h2').toggle(

        function() {

           $(this).next('.answer').slideDown();

        },

        function() {

           $(this).next('.answer').fadeOut();

      }

    );

}); 

  1. Pawan Shukla

    Post:29

    Points:203
    Re: jQuery hide() hides what it shouldn't

    The toggle function you're trying to use is deprecated and removed !

    The only toggle() function that is left in jQuery, is the one that toggles visibility, and that's why it's hiding everything.

    $('.faq h2').toggle();

    ... hides every visible h2 element, and shows every hidden h2 element

    You'll have to create your own toggle

    $('.answer').hide();

    $('.faq h2').on('click', function() {

        var flag = $(this).data('flag');

     

        if ( !flag ) {

           $(this).next('.answer').slideDown();

        } else {

          $(this).next('.answer').fadeOut();

        }

     

        $(this).data('flag', !flag);

    });

    Also, remove the script tag that is loading jQuery in the head, once is enough ! 

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!