重构jQuery重复模式

Question

I have painted my self into a corner in order to quickly prototype. What's the best way to refactor the following jQuery code? Its functionality is to toggle between some sidebar navigation items. I need it to be more dynamic in order to be scalable.

Would you add the IDs inside the if statements, in an array and iterate through them? Use variables? Create a function and call it on the html side onClick? No matter what I think of, it stills leads to a bunch of repeating code.

Thank you!

 // TOGGLING LEFT NAVIGATION $('#settingsClick').click(function() { if( $('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) { $('#addContainer').slideUp(350); $('#noteContainer').slideUp(350); $('#logoContainer').slideUp(350); $('#settingsContainer').slideDown(350); $('#themeContainer').slideUp(350); } else { $('#settingsContainer').slideToggle(350); } }); $('#addClick').click(function() { if( $('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) { $('#settingsContainer').slideUp(350); $('#noteContainer').slideUp(350); $('#logoContainer').slideUp(350); $('#addContainer').slideDown(350); $('#themeContainer').slideUp(350); } else { $('#addContainer').slideToggle(350); } }); $('#noteClick').click(function() { if( $('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible') ) { $('#settingsContainer').slideUp(350); $('#addContainer').slideUp(350); $('#logoContainer').slideUp(350); $('#noteContainer').slideDown(350); $('#themeContainer').slideUp(350); } else { $('#noteContainer').slideToggle(350); } }); $('#logoClick').click(function() { if( $('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible') ) { $('#settingsContainer').slideUp(350); $('#addContainer').slideUp(350); $('#noteContainer').slideUp(350); $('#logoContainer').slideDown(350); $('#themeContainer').slideUp(350); } else { $('#logoContainer').slideToggle(350); } }); $('#themeClick').click(function() { if( $('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible') ) { $('#settingsContainer').slideUp(350); $('#addContainer').slideUp(350); $('#noteContainer').slideUp(350); $('#logoContainer').slideUp(350); $('#themeContainer').slideDown(350); } else { $('#themeContainer').slideToggle(350); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="settingsClick">Click Me</a><br> <div id="settingsContainer">Content...</div> <br><br> <a id="addClick">Click Me</a><br> <div id="addContainer">Content...</div> <br><br> <p> Etc... Etc....</p> 

Answer 1

You should group using the common CSS class, ie header and content . Using the established relationship you can target the others content holder and content associated with the current clicked header element.

 $('.container .header').on('click', function() { //Get the current element var $this = $(this); //find the content var $content = $this.closest('.container').find('.content'); //$this.next() //get all contents var content = $('.container .content'); //Slide up others content.not($content).slideUp(350); //Slide down $content.slideToggle(350); }); 

 .content { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="header" id="settingsClick">Click Me</div> <div class="content" id="settingsContainer">Content...</div> </div> <div class="container"> <div class="header" id="addClick">Click Me</div> <div class="content" id="addContainer">Content...</div> </div> <div class="container"> <div class="header" id="noteClick">Click Me</div> <div class="content" id="noteContainer">Content...</div> </div> 

Answer 2

the best bet would be to do it like so

 $(document).on('click', ".trigger", function() { var sibling_content = $(this).siblings(".content"); if (!sibling_content.hasClass('active')) { $(".content").slideUp('slow').removeClass('active'); sibling_content.slideDown('slow').addClass('active'); } else { sibling_content.slideUp('slow').removeClass('active'); } }) 

 .trigger { background-color: red; color: white; font-size: 16px; } .content { background-color: blue; color: white; font-size: 16px; padding: 20px 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="trigger">trigger</div> <div class="content">content</div> </div> <div class="container"> <div class="trigger">trigger</div> <div class="content">content</div> </div> <div class="container"> <div class="trigger">trigger</div> <div class="content">content</div> </div> <div class="container"> <div class="trigger">trigger</div> <div class="content">content</div> </div>