CODEWITHSUNDEEP
javascriptjquery
noushid p
noushid p

Reputation: 1483

toggle with jQuery 1.8.3

Create toggle with jQuery 1.8.3 like this

 $(document).ready(function() {
        $('#showmenu1').click(function() {
                $('.menu1').slideToggle("fast");
        });
   
   $('#showmenu2').click(function() {
                $('.menu2').slideToggle("fast");
        });
   
   $('#showmenu3').click(function() {
                $('.menu3').slideToggle("fast");
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="showmenu1">Click Here</div>
<div class="menu1" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu2">Click Here</div>
<div class="menu2" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu3">Click Here</div>
<div class="menu3" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>

how can i reduce the above jQuery code?

Upvotes: 0

Views: 766

Answers (3)

John Slegers
John Slegers

Reputation: 47081

Here's how you can minimize your jQuery code without changing your HTML :

 $(document).ready(function() {
    $('[id^=showmenu]').click(function() {
        $(this).next('[class^=menu]').slideToggle("fast");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="showmenu1">Click Here</div>
<div class="menu1" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu2">Click Here</div>
<div class="menu2" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu3">Click Here</div>
<div class="menu3" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>

Upvotes: 1

epascarello
epascarello

Reputation: 207501

Use a common class and use next()

$(document).ready(function() {
    $('.menu-item').on("click", function() {
        $(this).next().slideToggle("fast");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="showmenu1" class="menu-item">Click Here</div>
<div class="menu1" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu2" class="menu-item">Click Here</div>
<div class="menu2" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu3" class="menu-item">Click Here</div>
<div class="menu3" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>

or if the menu is not right next to it, use a data attribute

$(document).ready(function() {
    $('[data-toggles]').on("click", function() {
        var sel = $(this).data("toggles");
        $(sel).slideToggle("fast");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="showmenu1" data-toggles=".menu1">Click Here</div>
<div class="menu1" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu2" data-toggles=".menu2">Click Here</div>
<div class="menu2" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu3" data-toggles=".menu3">Click Here</div>
<div class="menu3" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>

Upvotes: 2

Jai
Jai

Reputation: 74738

Instead of IDs change to class attribute and use $(this) context and refer to next div to show: 

$(document).ready(function() {
  $('.showmenu').click(function() {
    $(this).next('.menu').slideToggle("fast");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="showmenu">Click Here</div>
<div class="menu" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div class="showmenu">Click Here</div>
<div class="menu" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div class="showmenu">Click Here</div>
<div class="menu" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>

Upvotes: 1

Related Questions