How to close collapse when another is open

Question

I tried to close the another collapse when any collapse is open . the html code and jquery code below here

  <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>

the jquery is as below

$(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();

    });
});

the css as

<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>

But the above jquery did not working instead of closing another collapse its closes self div

Answer 1

Use jQuery UI Accordion function: Here is details Link and here is JSFiddle

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

And put your elements in #accordion div element.

Answer 2

Please look at this approach:

$(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>

Answer 3

You need to find the siblings of the clicked 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>