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