menu - jQuery - From a nav link to a sliding expandable container -

the title must impossible understand, sorry that. try explain i'm trying do. using jquery slinding expand container. have nav menu, exemple:

<nav id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#" data-cat="tech">technology</a></li> <li><a href="#" data-cat="world">world</a></li> </ul> </nav> 

and after that, temporary hided container:

<div id="categories"> <div id="tech"> category "tech", links images (articles) </div> <div id="world"> category "world", links images (articles) </div> </div> 

what script needs "data-cat" attribute , slide respective div have "id". if there's category container, need show (sliding down). otherwise if there's expanded needs slide (like carousel) new toggled category (from left/right). problem can't work. , have no idea on how it, actually.

$(function () {    $('#nav [data-cat]').on('click', function (e) {      e.preventdefault();        var cat = $(this).attr('data-cat');      $('#categories').find('#' + cat).slidedown().siblings().slideup();    });  });

#categories div {    display: none;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <nav id="nav">      <ul>          <li><a href="#">home</a></li>          <li><a href="#" data-cat="tech">technology</a></li>          <li><a href="#" data-cat="world">world</a></li>      </ul>  </nav>      <div id="categories">      <div id="tech">the category "tech", links images (articles)</div>      <div id="world">the category "world", links images (articles)</div>  </div>