javascriptjqueryjquery-slide-effects

jquery slide's for step method


Am using jquery slide(down/up) effect for a step process there i struck.i don't know how to slide up the id if it was not selected are used see my fiddle it clear my doubt

$(function(){
        $('ul.new_checkout li > .title').on('click', function(){
            var id=$(this).attr('id');
            var rep=id.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
            console.log("id:" +rep);
            if(rep){
               $("#"+rep).slideDown('fast');
              }
                 })
           });

 <ul class="new_checkout">
    <li>
         <div class="title" id="step-1"> Step-1</div>
     <div class="content" id="step1"></div>
    </li>
 </ul>

how sholud i slide up a step id if i click other steps? help me out


Solution

  • I got my answer finally fiddle to my answer

    hiding the content before the step show.

    $('ul.new_checkout li > .title').on('click', function(){
      var id=$(this).attr('id');
      var rep=id.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
      console.log("id:" +rep);
      if(rep){
        $('.content').slideUp('slow');
        $("#"+rep).slideDown('fast');
      }
    });