如何在另一個打開時關閉崩潰

Question

我試圖在打開任何崩潰時關閉另一個崩潰。 html代碼及以下這裏

<div class="content white"> <h2>Italian Cities</h2>  <div 
    class="accordion-container">  <a href="#" 
    class="accordion-toggle">Rome <span class="toggle-icon"><i class="fa 
    fa-plus-circle"></i></span></a>   <div class="accordion-content"> 
       <img src="images/italy-thumb_rome.jpg" />   <p>Lorem ipsum dolor 
    sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
    ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
       <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
    quae ab illo inventore veritatis et quasi architecto beatae vitae 
    dicta sunt explicabo. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est 
    laborum.</p>  </div>  <!--/.accordion-content--> </div> 
     <!--/.accordion-container--> <div class="accordion-container"> 
      <a href="#" class="accordion-toggle">Florence <span 
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a> 
      <div class="accordion-content">    <img 
    src="images/italy-thumb_florence.jpg" />   <p>Lorem ipsum dolor sit 
    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur.</p>   <p>Sed ut 
    perspiciatis unde omnis iste natus error sit voluptatem accusantium 
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
    inventore veritatis et quasi architecto beatae vitae dicta sunt 
    explicabo. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>  </div> 
      <!--/.accordion-content--> </div> <!--/.accordion-container--> 
     <div class="accordion-container">  <a href="#" 
    class="accordion-toggle">Venice <span class="toggle-icon"><i 
    class="fa fa-plus-circle"></i></span></a>  <div 
    class="accordion-content">   <img 
    src="images/italy-thumb_venice.jpg" />   <p>Lorem ipsum dolor sit 
    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur.</p>   <p>Sed ut 
    perspiciatis unde omnis iste natus error sit voluptatem accusantium 
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
    inventore veritatis et quasi architecto beatae vitae dicta sunt 
    explicabo. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>  </div> 
      <!--/.accordion-content--> </div> <!--/.accordion-container--> 
     <div class="accordion-container">  <a href="#" 
    class="accordion-toggle">Cinque Terre <span class="toggle-icon"><i 
    class="fa fa-plus-circle"></i></span></a>  <div 
    class="accordion-content">   <img 
    src="images/italy-thumb_cinque-terre.jpg" />   <p>Lorem ipsum dolor 
    sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
    ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
       <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
    quae ab illo inventore veritatis et quasi architecto beatae vitae 
    dicta sunt explicabo. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est 
    laborum.</p>  </div>  <!--/.accordion-content--> </div> 
     <!--/.accordion-container--> <div class="accordion-container"> 
      <a href="#" class="accordion-toggle">Pompeii <span 
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a> 
      <div class="accordion-content">    <img 
    src="images/italy-thumb_pompeii.jpg" />    <p>Lorem ipsum dolor sit 
    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur.</p>   <p>Sed ut 
    perspiciatis unde omnis iste natus error sit voluptatem accusantium 
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
    inventore veritatis et quasi architecto beatae vitae dicta sunt 
    explicabo. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>  </div> 
      <!--/.accordion-content--> </div> <!--/.accordion-container--> 
    </div> 

jQuery的jQuery代碼是如下

$(document).ready(function() { 
    $('.accordion-toggle').on('click', function(event){ 
     event.preventDefault(); 
     // create accordion variables 
     var accordion = $(this); 
     var accordionContent = accordion.next('.accordion-content'); 
     var accordionToggleIcon = $(this).children('.toggle-icon'); 

     // toggle accordion link open class 
     accordion.toggleClass("open"); 
     // toggle accordion content 
     accordionContent.slideToggle(250); 

     // change plus/minus icon 
     if (accordion.hasClass("open")) { 
      accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>"); 
     } else { 
      accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>"); 
     } 
    // 
    var targetElement = $(this).next('.accordion-content'); 
    targetElement.slideToggle(); 
    targetElement.siblings('.accordion-content').slideUp(); 

    }); 
}); 

的CSS爲

<style> 
      .accordion-container { 
    width: 100%; 
    margin: 0 0 20px; 
    clear: both; 
} 
.accordion-toggle { 
    position: relative; 
    display: block; 
    padding: 20px; 
    font-size: 1.5em; 
    font-weight: 300; 
    background: #999; 
    color: #fff; 
    text-decoration: none; 
} 
.accordion-toggle.open { 
    background: #333; 
    color: #fff; 
} 
.accordion-toggle:hover { 
    background: #666; 
} 
.accordion-toggle span.toggle-icon { 
    position: absolute; 
    top: 9px; 
    right: 20px; 
    font-size: 1.5em; 
} 
.accordion-content { 
    display: none; 
    padding: 20px; 
    overflow: auto; 
} 
.accordion-content img { 
    display: block; 
    float: left; 
    margin: 0 15px 10px 0; 
    max-width: 100%; 
    height: auto; 
} 

/* media query for mobile */ 
@media (max-width: 767px) { 
    .accordion-content { 
     padding: 10px 0; 
     overflow: inherit; 
    } 
}  
      </style> 

但上面的jQuery沒有代替工作收盤另一個崩潰了的關閉自我分區

Answer 1

你需要找到點擊的兄弟姐妹accordion-container

$(document).ready(function() { 
 
    $('.accordion-toggle').on('click', function(event) { 
 
    event.preventDefault(); 
 
    // create accordion variables 
 
    var accordion = $(this); 
 
    var accordionContent = accordion.next('.accordion-content'); 
 
    var accordionToggleIcon = $(this).children('.toggle-icon'); 
 

 
    // toggle accordion link open class 
 
    accordion.toggleClass("open"); 
 
    // toggle accordion content 
 
    accordionContent.slideToggle(250); 
 

 
    // change plus/minus icon 
 
    if (accordion.hasClass("open")) { 
 
     accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>"); 
 

 
     //close other open elements 
 
     var $siblings = accordion.parent().siblings('.accordion-container'); 
 
     $siblings.find('.accordion-content').slideUp(); 
 
     $siblings.find('.accordion-toggle.open').removeClass('open').find('.toggle-icon').html("<i class='fa fa-plus-circle'></i>"); 
 

 
    } else { 
 
     accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>"); 
 
    } 
 
    }); 
 
});

.open { 
 
    background-color: lightgrey; 
 
} 
 
.accordion-container { 
 
    width: 100%; 
 
    margin: 0 0 20px; 
 
    clear: both; 
 
} 
 
.accordion-toggle { 
 
    position: relative; 
 
    display: block; 
 
    padding: 20px; 
 
    font-size: 1.5em; 
 
    font-weight: 300; 
 
    background: #999; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.accordion-toggle.open { 
 
    background: #333; 
 
    color: #fff; 
 
} 
 
.accordion-toggle:hover { 
 
    background: #666; 
 
} 
 
.accordion-toggle span.toggle-icon { 
 
    position: absolute; 
 
    top: 9px; 
 
    right: 20px; 
 
    font-size: 1.5em; 
 
} 
 
.accordion-content { 
 
    display: none; 
 
    padding: 20px; 
 
    overflow: auto; 
 
} 
 
.accordion-content img { 
 
    display: block; 
 
    float: left; 
 
    margin: 0 15px 10px 0; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
/* media query for mobile */ 
 

 
@media (max-width: 767px) { 
 
    .accordion-content { 
 
    padding: 10px 0; 
 
    overflow: inherit; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content white"> 
 
    <h2>Italian Cities</h2> 
 
    <div class="accordion-container"> <a href="#" class="accordion-toggle">Rome <span class="toggle-icon"><i class="fa 
 
    fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_rome.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
    <div class="accordion-container"> 
 
    <a href="#" class="accordion-toggle">Florence <span 
 
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_florence.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
    <div class="accordion-container"> <a href="#" class="accordion-toggle">Venice <span class="toggle-icon"><i 
 
    class="fa fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_venice.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
    <div class="accordion-container"> <a href="#" class="accordion-toggle">Cinque Terre <span class="toggle-icon"><i 
 
    class="fa fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_cinque-terre.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
    <div class="accordion-container"> 
 
    <a href="#" class="accordion-toggle">Pompeii <span 
 
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_pompeii.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
</div>

Answer 2

使用jQuery UI手風琴功能：下面是詳細信息Link這裏是 JSFiddle

<script> 
    $(function() { 
    $("#accordion").accordion({ 
     collapsible: true 
    }); 
    }); 
    </script> 

，放在#accordion div元素的元素。

Answer 3

請看看這個方法：

$(document).ready(function() { 
 
    $('.accordion-toggle').on('click', function(event) { 
 
    event.preventDefault(); 
 

 
    // create accordion variables 
 
    var accordion = $(this); 
 
    var accordionContent = accordion.next('.accordion-content'); 
 
    var accordionToggleIcon = $(this).children('.toggle-icon'); 
 

 
    // toggle accordion link open class 
 
    accordion.toggleClass("open"); 
 
    // toggle accordion content 
 
    accordionContent.slideToggle(250); 
 

 
    // change plus/minus icon 
 
    if (accordion.hasClass("open")) { 
 
     accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>"); 
 

 
     //close the already open tab 
 
     $(".open").not(accordion).removeClass("open"); 
 
     $('.accordion-content').not(accordionContent).slideUp(function() { 
 
     $('html, body').animate({ 
 
      scrollTop: accordion.offset().top 
 
     }, 10); 
 
     }); 
 

 

 

 
    } else { 
 
     accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>"); 
 
    } 
 

 

 

 

 

 
    }); 
 
});

.accordion-container { 
 
    width: 100%; 
 
    margin: 0 0 20px; 
 
    clear: both; 
 
} 
 
.accordion-toggle { 
 
    position: relative; 
 
    display: block; 
 
    padding: 20px; 
 
    font-size: 1.5em; 
 
    font-weight: 300; 
 
    background: #999; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.accordion-toggle.open { 
 
    background: #333; 
 
    color: #fff; 
 
} 
 
.accordion-toggle:hover { 
 
    background: #666; 
 
} 
 
.accordion-toggle span.toggle-icon { 
 
    position: absolute; 
 
    top: 9px; 
 
    right: 20px; 
 
    font-size: 1.5em; 
 
} 
 
.accordion-content { 
 
    display: none; 
 
    padding: 20px; 
 
    overflow: auto; 
 
} 
 
.accordion-content img { 
 
    display: block; 
 
    float: left; 
 
    margin: 0 15px 10px 0; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
/* media query for mobile */ 
 

 
@media (max-width: 767px) { 
 
    .accordion-content { 
 
    padding: 10px 0; 
 
    overflow: inherit; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<div class="content white"> 
 
    <h2>Italian Cities</h2> 
 
    <div class="accordion-container"> <a href="#" class="accordion-toggle">Rome <span class="toggle-icon"><i class="fa 
 
    fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_rome.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
    <div class="accordion-container"> 
 
    <a href="#" class="accordion-toggle">Florence <span 
 
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_florence.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
    <div class="accordion-container"> <a href="#" class="accordion-toggle">Venice <span class="toggle-icon"><i 
 
    class="fa fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_venice.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
    <div class="accordion-container"> <a href="#" class="accordion-toggle">Cinque Terre <span class="toggle-icon"><i 
 
    class="fa fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_cinque-terre.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
    <div class="accordion-container"> 
 
    <a href="#" class="accordion-toggle">Pompeii <span 
 
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a> 
 
    <div class="accordion-content"> 
 
     <img src="images/italy-thumb_pompeii.jpg" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat 
 
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <!--/.accordion-content--> 
 
    </div> 
 
    <!--/.accordion-container--> 
 
</div>