CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7627319
user7627319

Reputation:

Can't SlideToggle() class under h2

Problem

My problem is that I'm trying to slideToggle() a <div class='inputs'></div> underneath the <h2></h2> that was clicked on. Another thing is that I'm not getting any errors.

    // MAIN
    function main() {
        $(".toggle-inputs").on("click", function() {
           $(this).find('.inputs').slideToggle();
        });
    }
    
    // LOAD
    $(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<section>

    <div class="required">
        <h3>* Required Fields</h3>
    </div>

    <div class="add-student">

        <h2 class="toggle-inputs">Add Student <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="student-id" placeholder="* Student ID...">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="teacher-firstname" placeholder="* Teacher's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Teacher's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Student</button>
        </div>
    </div>
    <!-- END OF ADD-STUDENT -->

    <div class="add-teacher">

        <h2 class="toggle-inputs">Add Teacher <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Teacher</button>
        </div>
    </div>
    <!-- END OF ADD-TEACHER -->

    <div class="add-driver">

        <h2 class="toggle-inputs">Add Driver <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="lastname" placeholder="* Phone Number...">
            <input type="text" name="lastname" placeholder="* Area Code...">
            <input type="text" name="teacher-firstname" placeholder="* Leader's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Leader's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Driver</button>
        </div>
    </div>
    <!-- END OF ADD-DRIVER -->

    <div class="add-team">

        <h2 class="toggle-inputs">Add Team <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <a href="JavaScript:void(0)">Add A Member</a>

            <input type="text" name="student-id" placeholder="* Leader's ID...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Team</button>
        </div>
    </div>
    <!-- END OF ADD-TEAM -->

</section>
<!-- END OF SECTION -->

</div>
<!-- END OF CONTAINER -->

Upvotes: 0

Views: 31

Answers (3)

Оzgur
Оzgur

Reputation: 432

First, you need different selectors for each section. Like;

<h2 id="toggle-inputs-students">Add Student

And

<div id="inputs-students">

When it comes to JS part, you can use code below

$( "#toggle-inputs-students" ).click(function() {
  $( "#inputs-students" ).slideToggle( "slow", function() {
// Animation complete.
  });
});

Upvotes: 0

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

The problem is .find() is looking at the child elements of h2 which in this case is only a <i> element so it doesn't find what it's looking for. Instead get the parent first so you are searching in <div class="inputs"> instead.

// MAIN
    function main() {
        $(".toggle-inputs").on("click", function() {
           $(this).parent().find('.inputs').slideToggle();
        });
    }
    
    // LOAD
    $(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<section>

    <div class="required">
        <h3>* Required Fields</h3>
    </div>

    <div class="add-student">

        <h2 class="toggle-inputs">Add Student <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="student-id" placeholder="* Student ID...">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="teacher-firstname" placeholder="* Teacher's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Teacher's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Student</button>
        </div>
    </div>
    <!-- END OF ADD-STUDENT -->

    <div class="add-teacher">

        <h2 class="toggle-inputs">Add Teacher <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Teacher</button>
        </div>
    </div>
    <!-- END OF ADD-TEACHER -->

    <div class="add-driver">

        <h2 class="toggle-inputs">Add Driver <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="lastname" placeholder="* Phone Number...">
            <input type="text" name="lastname" placeholder="* Area Code...">
            <input type="text" name="teacher-firstname" placeholder="* Leader's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Leader's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Driver</button>
        </div>
    </div>
    <!-- END OF ADD-DRIVER -->

    <div class="add-team">

        <h2 class="toggle-inputs">Add Team <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <a href="JavaScript:void(0)">Add A Member</a>

            <input type="text" name="student-id" placeholder="* Leader's ID...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Team</button>
        </div>
    </div>
    <!-- END OF ADD-TEAM -->

</section>
<!-- END OF SECTION -->

</div>
<!-- END OF CONTAINER -->

Upvotes: 0

user7627319
user7627319

Reputation:

The problem was that I had to use next() instead of find().

    // MAIN
    function main() {
        $(".toggle-inputs").on("click", function() {
           $(this).next('.inputs').slideToggle();
        });
    }
    
    // LOAD
    $(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<section>

    <div class="required">
        <h3>* Required Fields</h3>
    </div>

    <div class="add-student">

        <h2 class="toggle-inputs">Add Student <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="student-id" placeholder="* Student ID...">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="teacher-firstname" placeholder="* Teacher's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Teacher's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Student</button>
        </div>
    </div>
    <!-- END OF ADD-STUDENT -->

    <div class="add-teacher">

        <h2 class="toggle-inputs">Add Teacher <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Teacher</button>
        </div>
    </div>
    <!-- END OF ADD-TEACHER -->

    <div class="add-driver">

        <h2 class="toggle-inputs">Add Driver <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <input type="text" name="firstname" placeholder="* Firstname...">
            <input type="text" name="lastname" placeholder="* Lastname...">
            <input type="text" name="lastname" placeholder="* Phone Number...">
            <input type="text" name="lastname" placeholder="* Area Code...">
            <input type="text" name="teacher-firstname" placeholder="* Leader's Firstname...">
            <input type="text" name="teacher-lastname" placeholder="* Leader's Lastname...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Driver</button>
        </div>
    </div>
    <!-- END OF ADD-DRIVER -->

    <div class="add-team">

        <h2 class="toggle-inputs">Add Team <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

        <div class="inputs">
            <a href="JavaScript:void(0)">Add A Member</a>

            <input type="text" name="student-id" placeholder="* Leader's ID...">

            <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Team</button>
        </div>
    </div>
    <!-- END OF ADD-TEAM -->

</section>
<!-- END OF SECTION -->

</div>
<!-- END OF CONTAINER -->

Upvotes: 1

Related Questions