button click - reveal content,hide previous visible content

Question

I have intended following functionality for button click/ reveal content:

1.button click- toggle content block, - WORKS

2.button double click- hide current content block (toggle) - WORKS

3.click on different button when one is active - hide active one and reveal the one user clicks.Never hides previous content - NEED HELP :(

4. hide all content if clicked outside side-content block - WORKS

Please point me to a direction. Much appreciated.

 $(".left-quicklinks li").click(function() { var LinkButton = $(this).attr("data-button"), //buttons to switch between boxes LinkContent = "div[data-content=" + LinkButton + "]"; //content boxes "data-button" and "data-content" holds the same value $(LinkContent).fadeToggle(200); //console.log(LinkButton); //console.log(LinkContent); }); //Close elements when clicking anywhere on the page $(document).mouseup(function(e) { var container = $('.left-quicklinks'); if (!container.is(e.target) && container.has(e.target).length === 0) { $('.side-content div').fadeOut(200); }; }); /* Process : 1.button click- toggle content block, - WORKS 2.button double click- hide current content block (toggle) - WORKS 3.click on different button when one is active - hide active one and reveal the one user clicks. - NEED HELP :( 4. hide all content if clicked outside side-content block - WORKS */

 .left-quicklinks { background: #3F4018; margin: 0; padding: 0; text-align: center; } .left-quicklinks li { width: 150px; height: 150px; display: inline-block; list-style-type: none; line-height: 150px; text-align: center; background: #7E7F31; color: #fff; cursor: pointer; font-size: 18px; } .left-quicklinks li:hover { background: #ccc; color: #333; } /* Content Block*/ .side-content { width: 100%; height: 200px; background: #7F7F57; position: relative; } .side-content div { height: 200px; width: 200px; position: absolute; left: 50%; transform: translateX(-50%); background: #CACC4E; display: none; /* Hide now and revel with jquery */ } .side-content div h1 { padding-top: 50px; color: #333; text-align: center; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Buttons --> <ul class="left-quicklinks"> <li class="i-notices" data-button="notices">Notices</li> <li class="i-calendar" data-button="events">Our Events</li> <li class="i-twitter" data-button="feed">Feeds</li> <li class="i-link" data-button="links">Links</li> <li class="i-awards" data-button="about">About Us</li> </ul> <!-- Content --> <section class="side-content"> <div data-content="notices"> <h1>Notices Content</h1> </div> <div data-content="events"> <h1>Events Content</h1> </div> <div data-content="feed"> <h1>Feed Content</h1> </div> <div data-content="links"> <h1>Links Content</h1> </div> <div data-content="about"> <h1>About Us Content</h1> </div> </section>

Answer 1

jsBin demo

$(".left-quicklinks li").click(function() {
  var LinkButton = $(this).attr("data-button"),
      LinkContent = $("div[data-content=" + LinkButton + "]");

  $("div[data-content]").not(LinkContent).fadeOut();
  LinkContent.fadeToggle(200);
});