Clone of moi answer in SO

link: http://stackoverflow.com/questions/29508674/condensing-jquery-slidetoggle-function/29509231

by Annie Lagang

HTML

<article style="text-align:left;">
	<h1>Please select your issue</h1>

	<button class="btn btn-b btn-ba icon-key" id="logon">Issues logging in to Syneclin.net</button>
	
	<div class="logonanswer" style="display:none;">
		<p class="expand">
			<li class="lst lst-b lst-ba icon-go" id="user">I have lost my User ID</li>
				<p class="user" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="password">I have lost my Password</li>
				<p class="password" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="memorable">I have lost my Memorable Data</li>
				<p class="memorable" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="disabled">My account has been disabled</li>
				<p class="disabled" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="training">Training??</li>
				<p class="training" style="display:none;">Insert some blurb here about user ID's</p>
		</div>
	</div>

	<button class="btn btn-b btn-ba icon-page" id="ecrf">Issues entering data / accessing eCRF's</button>

	<div class="ecrfanswer" style="display:none;">
		<div class="expand">
			<li class="lst lst-b lst-ba icon-go" id="ecrftest">eCRF Test Page</li>
				<p class="ecrftest" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="dropdown">I can't delete information in a dropdown menu</li>
				<p class="dropdown" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="check">I can't remove a check from a checkbox</li>
				<p class="check" style="display:none;">Insert some blurb here about user ID's</p>
		</div>
	</div>
	
	<div class="footer">
		
	</div>
</article>

JavaScript

$(function(){
    // a list of ids also used as classes
    var listOfIds = ["user", "password", "memorable", "disabled",     "training", "ecrftest", "dropdown",  "check" ];
    
    $('#logon').click(function()
	{
		$('.logonanswer').slideToggle("fast");
		$('.ecrfanswer').hide(1000);
	});

	$('#ecrf').click(function()
	{
		$('.ecrfanswer').slideToggle("fast");
		$('.logonanswer').hide(1000);
	});
    
    // convert JavaScript array to a jQuery array
    var jqueryArr = $.makeArray(listOfIds);
    // map each id to it's corresponding class 
    // and bind the click functionality
    $.map(jqueryArr, function(value, index) {
         $("#" + value).click(function()
	     {
		    $("." + value).slideToggle("fast");
	     });
    });
});