javascript - Hide a div that is currently opened and show the div thats clicked,and vice versa -

i want create product listing page using jquery, page: https://losangeles.sharegrid.com/browse/

here code:

$(function(){      $('.link').click(function(){        $(this).next('ul').toggle();      var id = $(this).attr("rel");      $('#'+id).show();      });    });

.container {    width: 100%;    height: auto;  }    .eighty-percent {    width: 80%;    margin: 0 auto;  }    .categories {    width: 20%;    float: left;    ul {      li {        ul {          display: none;        }      }    }  }    .products-list {    width: 80%;    float: right;    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">    <div class="eighty-percent">        <div class="categories left">          <ul>          <li>            <a href="#" class="link" id="main-category" rel="main1">              main-category-one            </a>            <ul>                <li><a href="#" class="link" id="sub-category-one" rel="main-sub1">sub-cat-one</a></li>              <li><a href="#" class="link" id="sub-category-one" rel="main-sub2">sub-cat-one</a></li>              <li><a href="#" class="link" id="sub-category-one" rel="main-sub3">sub-cat-one</a></li>              <li><a href="#" class="link" id="sub-category-one" rel="main-sub4">sub-cat-one</a></li>              </ul>          </li>        </ul>      </div>        <div class="products right">        <div class="products-list" id="main1">          <h1>main category one</h1>        </div>        <div class="products-list" id="main-sub1">          <h1>sub category one</h1>        </div>        <div class="products-list" id="main-sub2">          <h1>sub category one</h1>        </div>        <div class="products-list" id="main-sub3">          <h1>sub category one</h1>        </div>        <div class="products-list" id="main-sub4">          <h1>sub category one</h1>        </div>      </div>    </div>  </div>

now problem having can see, cannot make div opened make hidden when click on other sub category links. hope snippet make clear trying achieve

all changes , details commented within source.

fiddle

snippet

$(function() {      $('.link').click(function(event) {      /*       added prevent <a>nchor links       jumping. note `event`       parameter above well.      */      event.preventdefault();        $(this).next('ul').toggle();      var id = $(this).attr("rel");      /*      added class (i.e. `sub`),       each #main-sub* of them      targeted hide .hide()      method.      */      $('.sub').hide();      $('#' + id).show();      });    });

.container {    width: 100%;    height: auto;  }  /*   added prevent right  column wrapping under  left column.  */    .sublist {    height: 100vw;    display: none;  }  .categories {    width: 50%;    float: left;  }  .products-list {    width: 50%;    float: right;    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">      <!--removed .eighty-percent because  hindered layout in demo only,   adding or removing shouln't  affect functionality in production version.-->      <div class="categories left">      <ul>        <li>          <a href="#" class="link" id="main-category" rel="main1">main-category-one</a>            <!--added class (i.e. sublist)             in order style easier,             see css why styling needed -->            <ul class="sublist">              <!--changed each <a>nchor id             unique one. should never have more            1 of same id on page.-->              <li><a href="#" class="link" id="sub-category-one" rel="main-sub1">sub-cat-one</a>            </li>            <li><a href="#" class="link" id="sub-category-two" rel="main-sub2">sub-cat-two</a>            </li>            <li><a href="#" class="link" id="sub-category-three" rel="main-sub3">sub-cat-three</a>            </li>            <li><a href="#" class="link" id="sub-category-four" rel="main-sub4">sub-cat-four</a>            </li>            </ul>        </li>      </ul>        </div>      <div class="products right">        <div class="products-list" id="main1">          <h1>main category one</h1>        </div>        <div class="products-list sub" id="main-sub1">          <h2>sub category one</h2>        </div>        <div class="products-list sub" id="main-sub2">          <h2>sub category two</h2>        </div>        <div class="products-list sub" id="main-sub3">          <h2>sub category three</h2>        </div>        <div class="products-list sub" id="main-sub4">          <h2>sub category four</h2>        </div>            </div>      </div>