折り畳みが開いているときに別の折り畳みを閉じようとしました。 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のコードは
<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>
として
$(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、以下のようである。しかし上記のjqueryのは、別の崩壊そのを閉じるのではなく、機能していませんでした自己除算を閉じます
あまりにもCSSを投稿してください。 – vijayP