Show content

Question

I have code that, when clicked, expands a drop-down list to show a set of links. There are three different drop-down lists with different sets of links that show when the user clicks.

The script is below, but it is not dynamic. What is the best and most efficient way to write a script, so I don’t need to add it when additional dropdowns 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>

Run codeHide result

Answer 1

jquery . div, , button-nav $("div[class^=button-nav]"). id id $("."+$(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>

Hide result

Answer 2

, .row1 . , #row1. ,

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

, .button-nav1, .button-nav2 .button-nav3 ( button-nav)

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