CODEWITHSUNDEEP
javascriptjqueryhtml
chaser7016
chaser7016

Reputation: 595

Show Contents of Drop Down

I have code that when clicked expands a drop down to show a set of links. There are three different drop downs each with a different set of links that show when a user clicks.

The script is below, but it is not dynamic. What is a better and more efficient way to write the script, so I do not need to add to it when additional drop downs are needed? 

$(".button-nav1").click(function() {
  $(".row1").toggle();
});

$(".button-nav2").click(function() {
  $(".row2").toggle();
});

$(".button-nav3").click(function() {
  $(".row3").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt">&nbsp;▼</span>
</div>
<div class="row1 BGpadding">
  <ul class="2ndRESET">
    <li class="resetTWO"><strong>Overview</strong>
    </li>
    <li><strong>Training</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lorem Lipsum</a>
      </li>
    </ul>
    <li><strong>Toomy</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lipsum </a>
      </li>
      <li><a href="#">Loremu</a>
      </li>
      <li><a href="#">Lipsum</a>
      </li>
    </ul>
  </ul>
</div>
</div>

<div id="row2" class="button-nav2">Joe<span class="crt">&nbsp;▼</span>
</div>
<div class="row2 BGpadding">
  <ul class="2ndRESET">
    <li class="resetTWO"><strong>Overview</strong>
    </li>
    <li><strong>Training and Help</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lorem Lipsum</a>
      </li>
    </ul>
    <li><strong>Toomy</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lipsum </a>
      </li>
      <li><a href="#">Loremu</a>
      </li>
      <li><a href="#">Lipsum</a>
      </li>
    </ul>
  </ul>
</div>
</div>

<div id="row3" class="button-nav3">Joe<span class="crt">&nbsp;▼</span>
</div>
<div class="row3 BGpadding">
  <ul class="2ndRESET">
    <li class="resetTWO"><strong>Overview</strong>
    </li>
    <li><strong>Training</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lorem Lipsum</a>
      </li>
    </ul>
    <li><strong>Toomy</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lipsum </a>
      </li>
      <li><a href="#">Loremu</a>
      </li>
      <li><a href="#">Lipsum</a>
      </li>
    </ul>
  </ul>
</div>
</div>

Upvotes: 1

Views: 563

Answers (2)

depperm
depperm

Reputation: 10746

You can reduce your jquery to one function. First listen to divs that have a class that starts with button-nav with the $("div[class^=button-nav]") query. Then get the id and toggle any class with that id with $("."+$(this).attr('id')).toggle();

$("div[class^=button-nav]").on('click',function() {
  $("."+$(this).attr('id')).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt">&nbsp;▼</span>
</div>
<div class="row1 BGpadding">
  <ul class="2ndRESET">
    <li class="resetTWO"><strong>Overview</strong>
    </li>
    <li><strong>Training</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lorem Lipsum</a>
      </li>
    </ul>
    <li><strong>Toomy</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lipsum </a>
      </li>
      <li><a href="#">Loremu</a>
      </li>
      <li><a href="#">Lipsum</a>
      </li>
    </ul>
  </ul>
</div>
</div>

<div id="row2" class="button-nav2">Joe<span class="crt">&nbsp;▼</span>
</div>
<div class="row2 BGpadding">
  <ul class="2ndRESET">
    <li class="resetTWO"><strong>Overview</strong>
    </li>
    <li><strong>Training and Help</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lorem Lipsum</a>
      </li>
    </ul>
    <li><strong>Toomy</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lipsum </a>
      </li>
      <li><a href="#">Loremu</a>
      </li>
      <li><a href="#">Lipsum</a>
      </li>
    </ul>
  </ul>
</div>
</div>

<div id="row3" class="button-nav3">Joe<span class="crt">&nbsp;▼</span>
</div>
<div class="row3 BGpadding">
  <ul class="2ndRESET">
    <li class="resetTWO"><strong>Overview</strong>
    </li>
    <li><strong>Training</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lorem Lipsum</a>
      </li>
    </ul>
    <li><strong>Toomy</strong>
    </li>
    <ul class="resetTWO">
      <li><a href="#">Lipsum </a>
      </li>
      <li><a href="#">Loremu</a>
      </li>
      <li><a href="#">Lipsum</a>
      </li>
    </ul>
  </ul>
</div>
</div>

Upvotes: 2

Alex Kudryashev
Alex Kudryashev

Reputation: 9470

From the code provided I assume .row1 is a typo. I hope you mean #row1. If so the code is reduced to 

$('.button-nav1,.button-nav2,.button-nav3').click(function(){
   $(this).toggle();
}

To combine all three function in one you can add common class to all .button-nav1, .button-nav2 and .button-nav3 (say button-nav) and change the function to

$(document).on('click', '.button-nav', function(){
   $(this).toggle();
}

Upvotes: 0

Related Questions