jquery slide's for step method

Question

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

DutGRIFF · Accepted Answer · 2013-12-07 06:00:27Z

1

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

edited Dec 7, 2013 at 6:00

DutGRIFF

5,2331 gold badge36 silver badges43 bronze badges

answered Dec 7, 2013 at 5:55

user1999510

Sign up to request clarification or add additional context in comments.

Comments

DutGRIFF · Accepted Answer · 2013-12-07 05:56:43Z

0

$(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){
      $(".content").slideUp('fast');
      $("#"+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>

This will slide the other divs up when it slide the corrrect one down.

Here is the updated fiddle.

answered Dec 7, 2013 at 5:56

DutGRIFF

5,2331 gold badge36 silver badges43 bronze badges

Collectives™ on Stack Overflow

jquery slide's for step method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related