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. Th

Solution 1:

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();
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divid="row1"class="button-nav1">Joe<spanclass="crt">&nbsp;▼</span></div><divclass="row1 BGpadding"><ulclass="2ndRESET"><liclass="resetTWO"><strong>Overview</strong></li><li><strong>Training</strong></li><ulclass="resetTWO"><li><ahref="#">Lorem Lipsum</a></li></ul><li><strong>Toomy</strong></li><ulclass="resetTWO"><li><ahref="#">Lipsum </a></li><li><ahref="#">Loremu</a></li><li><ahref="#">Lipsum</a></li></ul></ul></div></div><divid="row2"class="button-nav2">Joe<spanclass="crt">&nbsp;▼</span></div><divclass="row2 BGpadding"><ulclass="2ndRESET"><liclass="resetTWO"><strong>Overview</strong></li><li><strong>Training and Help</strong></li><ulclass="resetTWO"><li><ahref="#">Lorem Lipsum</a></li></ul><li><strong>Toomy</strong></li><ulclass="resetTWO"><li><ahref="#">Lipsum </a></li><li><ahref="#">Loremu</a></li><li><ahref="#">Lipsum</a></li></ul></ul></div></div><divid="row3"class="button-nav3">Joe<spanclass="crt">&nbsp;▼</span></div><divclass="row3 BGpadding"><ulclass="2ndRESET"><liclass="resetTWO"><strong>Overview</strong></li><li><strong>Training</strong></li><ulclass="resetTWO"><li><ahref="#">Lorem Lipsum</a></li></ul><li><strong>Toomy</strong></li><ulclass="resetTWO"><li><ahref="#">Lipsum </a></li><li><ahref="#">Loremu</a></li><li><ahref="#">Lipsum</a></li></ul></ul></div></div>

Solution 2:

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();
}