Question

This ‘click’ trigger:

<li class="booking"><a href="#page_7">Book Me</a></li>

Here’s the jQuery:

<script type='text/javascript'>
     $('.booking').click(function(){
     $('#svc_panel')fadeIn(function(){
     $('#date_panel,#time_panel,#confirm_panel')hide();
     });
  });


          $('.date_button').click(function(){
                $('#date_panel').fadeIn(function(){
                $('#svc_panel,#time_panel,#confirm_panel,').hide();
                });
          });

          $('.time_button').click(function(){
                $('#time_panel').fadeIn(function(){
                      $('#svc_panel,#date_panel,#confirm_panel').hide();
                });
          });

          $('.confirm_button').click(function(){
                $('#confirm').fadeIn(function(){
                      $('#csvc_panel,#date_panel,#time_panel').hide();
                });
          });

    });
    </script>

and the HTML:

<div id="svc_panel">

                    <table style="margin-left:30px;width:100%;text-align:left;">

                        <tr style="height:25px;">

                            <th style="width:500px;font-weight:bold;font-size:14px;">Service</th>

                            <th style="width:100px;font-weight:bold;font-size:14px;">Duration</th>

                            <th style="width:100px;font-weight:bold;font-size:14px;">Cost</th>

                        </tr>

                        <tr>

                            <td><a href="#" class="date_button">First Service</a></td>

                            <td>60 Minutes</td>

                            <td>$100</td>

                        </tr>

                        <tr>

                            <td><a href="#" class="date_button">Second Service</a></td>

                            <td>30 Minutes</td>

                            <td>$60</td>

                        </tr>

                        <tr>

                            <td><a href="#" class="date_button">Third Service</a></td>

                            <td>90 Minutes</td>

                            <td>$140</td>

                        </tr>

                </table>

                </div>

                <div id="date_panel">

                    <p>user picks date: <input id="datepicker" class="time_button" type="text"></p>

                </div>

                <div id="time_panel">

                    <div>user picks time on: <span id="target"></span></div>

                    <table>

                        <tr>

                            <td class="time_button"><a href="#">11:30 am</a></td>

                        </tr>

                        <tr>

                            <td class="time_button"><a href="#">12:30 pm</a></td>

                        </tr>

                        <tr>

                            <td class="time_button"><a href="#">2:00 pm</a></td>

                        </tr>

                    </table>

                </div>

                <div id="confirm_panel">

                You've chosen (service) on (date) at (time). Is this correct? <a href="#" class="confirm_button">Yes</a>

                </div>

How do I get these divs to show consecutively on click?

Answer 1

Typos are your enemy.

$(document).ready(function(){

$('#svc_panel,#date_panel,#time_panel,#confirm_panel').hide();

$(".booking").click(function(){
 $('#svc_panel').fadeIn(function(){
 $('#date_panel,#time_panel,#confirm_panel').hide();

 });
});


      $(".date_button").click(function(){
            $('#date_panel').fadeIn(function(){
            $('#svc_panel,#time_panel,#confirm_panel,').hide();
            });
      });

      $('.time_button').click(function(){
            $('#time_panel').fadeIn(function(){
                  $('#svc_panel,#date_panel,#confirm_panel').hide();
            });
      });

      $('.confirm_button').click(function(){
            $('#confirm_panel').fadeIn(function(){
                  $('#svc_panel,#date_panel,#time_panel').hide();
            });
      });

});

This is working code. Enjoy.

<li class="booking"><a href="#page_7">Book Me</a></li>


<div id="svc_panel">

                <table style="margin-left:30px;width:100%;text-align:left;">

                    <tr style="height:25px;">

                        <th style="width:500px;font-weight:bold;font-size:14px;">Service</th>

                        <th style="width:100px;font-weight:bold;font-size:14px;">Duration</th>

                        <th style="width:100px;font-weight:bold;font-size:14px;">Cost</th>

                    </tr>

                    <tr>

                        <td><a href="#" class="date_button">First Service</a></td>

                        <td>60 Minutes</td>

                        <td>$100</td>

                    </tr>

                    <tr>

                        <td><a href="#" class="date_button">Second Service</a></td>

                        <td>30 Minutes</td>

                        <td>$60</td>

                    </tr>

                    <tr>

                        <td><a href="#" class="date_button">Third Service</a></td>

                        <td>90 Minutes</td>

                        <td>$140</td>

                    </tr>

            </table>

            </div>

            <div id="date_panel">

                <p>user picks date: <input id="datepicker" class="time_button" type="text"></p>

            </div>

            <div id="time_panel">

                <div>user picks time on: <span id="target"></span></div>

                <table>

                    <tr>

                        <td class="confirm_button"><a href="#">11:30 am</a></td>

                    </tr>

                    <tr>

                        <td class="confirm_button"><a href="#">12:30 pm</a></td>

                    </tr>

                    <tr>

                        <td class="confirm_button"><a href="#">2:00 pm</a></td>

                    </tr>

                </table>

            </div>

            <div id="confirm_panel">

            You've chosen (service) on (date) at (time). Is this correct? <a href="#" class="confirm_button">Yes</a>

            </div>

http://jsfiddle.net/Incubator/sfhsS/16/