fadeToggle of many element

Question

please I want to apply fadeToggle for each button but it does not work with this method ,I try to apply with this How to use javascript variables in jquery selectors but not successful

this is Code HTML

   <div id="ajouter" class="dropdown">
        <ul>
            <li>
                <button class="projetbutton">Projet</button>
                <form class="projet" style="display:none">
                    <input type="text" />
                    <input type="submit" />
                </form>
            </li>

            <li>
                <button class="famillebutton">Famille</button>

                <form class="famille" style="display:none">
                    <input type="text" />
                    <input type="submit" />
                </form>
            </li>
        </ul>
    </div>

and this is script apply for the buttons

 <script>
var classElement = ["projet", "famille"];
var button = "button";
for (var i = 0; i < classElement.length; i++) {
    var classbutton = classElement[i].concat(button);

    $(document).ready(function () {
        $('.classbutton').click(function () {
            $(".classElement[i]").fadeToggle();
        });
    });
}
 </script>

Please if there is another method to do that job.

Give a common class to all elements on which you want to trigger the event and then use it `jQuery`. — niyasc, Jul 27 '16 at 10:05
Possible duplicate of [How to use javascript variables in jquery selectors](http://stackoverflow.com/questions/5891840/how-to-use-javascript-variables-in-jquery-selectors) — JJJ, Jul 27 '16 at 10:08
Then use `$(this).next().fadeToggle()` inside the click handler. — JJJ, Jul 27 '16 at 10:12

Satpal · Accepted Answer · 2016-07-27T10:13:31.147

You can take advantage of the relation ship between element and various DOM traversal methods available to target element and then perform desired operation.

Associate the click handler using a common class, here used classbutton with the elements, then used .next() to get the form element.

$(document).ready(function() {
  $('.classbutton').click(function() {
    $(this).next().fadeToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajouter" class="dropdown">
  <ul>
    <li>
      <button type="button" class="classbutton">Projet</button>
      <form style="display:none">
        <input type="text" />
        <input type="submit" />
      </form>
    </li>

    <li>
      <button type="button" class="classbutton">Famille</button>

      <form style="display:none">
        <input type="text" />
        <input type="submit" />
      </form>
    </li>
  </ul>
</div>

fadeToggle of many element

1 Answers1