dynamically toggle class with javascript

Question

I'm having trouble figuring out how to toggle a class depending on the anchor text that is clicked.

<div>
<a id="Menu1" href="#">Menu</a>
<div id="subMenu1" class="subLevel">
<p>stuff</p>
</div>

<div>
<a id="Menu2" href="#">Menu</a>
<div id="subMenu2" class="subLevel">
<p>stuff</p>
</div>

<div>
<a id="Menu3" href="#">Menu</a>
<div id="subMenu3" class="subLevel">
<p>stuff</p>
</div>

<script>
     $(document).ready(function () {

         $("#Menu" + [i]).on('click', function (e) {
             e.preventDefault();
             $("#subMenu" + [i]).toggleClass('dropDownShow');
         });
     });
</script>

Having trouble figuring out where var i changes from number 1 - 3 depenidng on anchor link that is clicked

Voting to close since this question was caused by a simple typographical error. — coatless
– coatless, Commented May 18, 2016 at 17:00

Nikhilesh K V · Accepted Answer · 2016-05-18 15:53:47Z

3

Here is one way to do it:

<div>
    <a id="Menu1" class="menu" href="#">Menu</a>
    <div id="subMenu1" class="subLevel">
    <p>stuff</p>
    </div>

    <div>
    <a id="Menu2" class="menu" href="#">Menu</a>
    <div id="subMenu2" class="subLevel">
    <p>stuff</p>
    </div>

    <div>
    <a id="Menu3" class="menu" href="#">Menu</a>
    <div id="subMenu3" class="subLevel">
    <p>stuff</p>
    </div>

    <script>
             $(document).ready(function () {

                 $(".menu").on('click', function (e) {
                     e.preventDefault();
                     $(this).next().toggleClass('dropDownShow');
                 });
             });


        </script>

edited May 18, 2016 at 15:53

answered May 18, 2016 at 15:51

Nikhilesh K V

1,48013 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nikhilesh K V Over a year ago

Removed the use of 'better'.

Daniel Rubio Over a year ago

thanks @NikhileshKV, what worked was using .children() instead of next()

Nikhilesh K V Over a year ago

Glad to help! But have you changed your html structure ? It should be next() according to your code.

Daniel Rubio Over a year ago

yeah, I looked over it again and made some changes to work best for my needs.

Nikhilesh K V Over a year ago

alright. Cool. You can accept the answer if its useful. ;)

Collectives™ on Stack Overflow

dynamically toggle class with javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related