如何在另一个打开时关闭崩溃

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>