多个切换不适用于this（）事件

Question

使用此代码时jsfiddle。

的JavaScript

function initialize()
{
   $(document).ready(function ()
   {
    $(".toggle_details").click(function () 
    {
        console.log('page loaded here');
        //$(this).
        $('.hidden_fair_details').slideToggle("slow");
        //$(this).parent().next(".hidden_fair_details").slideToggle("slow");
        console.log('page loaded here also');
    });
   });    
}

// Now you have to call this code
$(initialize);

CSS

.hidden_fair_details
{
    display:none;    
}

HTML

<div class="cab_info">
        <!--    <div style="width:100%;float:left;background-color:#444;color:#ffffff;">Car Class</div> -->
                <div class="one-head">
                Image of Car 

                    <!-- <img src="http://localhost:81/aadesh_cabs/wp-content/uploads/2015/06/Etios.png" /> -->
                </div>
                <div class="two-head">
                    4 + 1D                  </div>  
                <div class="three-head">2+2H</div>
                <div class="four-head">10</div>
                <div class="five-head">2750 Rs. <br />
                     <button class="toggle_details">Fair Details 2</button>

                </div>
                <div class="six-head">

                <a href="final-cab-booking.php?tbl=punemumbai&cabtype=Toyota Etios AC&rate=eco&email=Pune&city=Mumbai&date=2015-10-08">Book Now</a></div>
                <div class="hidden_fair_details">

                    Toll and Parking : Toll & Parking Extra<br />
                    Driver Incentives : Inclusive<br />
                </div>

            </div>
<div class="cab_info">
        <!--    <div style="width:100%;float:left;background-color:#444;color:#ffffff;">Car Class</div> -->
                <div class="one-head">
                Image of Car 

                    <!-- <img src="http://localhost:81/aadesh_cabs/wp-content/uploads/2015/06/Etios.png" /> -->
                </div>
                <div class="two-head">
                    4 + 1D                  </div>  
                <div class="three-head">2+2H</div>
                <div class="four-head">10</div>
                <div class="five-head">2750 Rs. <br />
                     <button class="toggle_details">Fair Details 2</button>

                </div>
                <div class="six-head">

                <a href="final-cab-booking.php?tbl=punemumbai&cabtype=Toyota Etios AC&rate=eco&email=Pune&city=Mumbai&date=2015-10-08">Book Now</a></div>
                <div class="hidden_fair_details">

                    Toll and Parking : Toll & Parking Extra<br />
                    Driver Incentives : Inclusive<br />
                </div>

            </div>
<div class="cab_info">
        <!--    <div style="width:100%;float:left;background-color:#444;color:#ffffff;">Car Class</div> -->
                <div class="one-head">
                Image of Car 

                    <!-- <img src="http://localhost:81/aadesh_cabs/wp-content/uploads/2015/06/Etios.png" /> -->
                </div>
                <div class="two-head">
                    4 + 1D                  </div>  
                <div class="three-head">2+2H</div>
                <div class="four-head">10</div>
                <div class="five-head">2750 Rs. <br />
                     <button class="toggle_details">Fair Details 2</button>

                </div>
                <div class="six-head">

                <a href="final-cab-booking.php?tbl=punemumbai&cabtype=Toyota Etios AC&rate=eco&email=Pune&city=Mumbai&date=2015-10-08">Book Now</a></div>
                <div class="hidden_fair_details">

                    Toll and Parking : Toll & Parking Extra<br />
                    Driver Incentives : Inclusive<br />
                </div>

            </div>

我想在点击时只展开特定div。 现在所有人都在同一时间开放。