CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Accordion jQuery - Open one item at once and close others

I have created a simple accordion, currently each item is opening, but I wanted to open one item at once and close others if opened

$(".title").on("click", function(e) {
	e.preventDefault();
  $(this).toggleClass('title-mob-minus'); // This is for icon
  $(this).next().slideToggle();
  return false;
});
.link-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.title {
  float: left;
  width: 100%;
}
.link-list__items {
  float: left;
  width: 100%;
  display: none;
}
.link-list__items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list__items ul li {
  list-style: none;
  display: block;
  padding-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion One</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion Two</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>

Upvotes: 0

Views: 442

Answers (3)

Taplar
Taplar

Reputation: 24965

Extract your toggle logic, then when clicking an accordion, close all the open ones, and then toggle the one clicked.

function toggleTitles ($titles) {
  $titles.toggleClass('title-mob-minus'); // This is for icon
  $titles.next().slideToggle();
}

var $allTitles = $(".title").on("click", function(e) {
  e.preventDefault();
  
  // collapse all the other accordions that are open
  toggleTitles($allTitles.not(this).filter('.title-mob-minus'));
  // toggle this accordion
  toggleTitles($(this));
});
.link-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.title {
  float: left;
  width: 100%;
}

.link-list__items {
  float: left;
  width: 100%;
  display: none;
}

.link-list__items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list__items ul li {
  list-style: none;
  display: block;
  padding-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-list">
  <div class="title" role="heading">
    <a href="javascript:;">Accordion One</a>
  </div>
  <div class="link-list__items" style="display: none;">
    <ul role="menu">
      <li><a href="#">Accordion Inner Item</a></li>
      <li><a href="#">Accordion Inner Item</a></li>
      <li><a href="#">Accordion Inner Item</a></li>
    </ul>
  </div>
</div>
<div class="link-list">
  <div class="title" role="heading">
    <a href="javascript:;">Accordion Two</a>
  </div>
  <div class="link-list__items" style="display: none;">
    <ul role="menu">
      <li><a href="#">Accordion Inner Item</a></li>
      <li><a href="#">Accordion Inner Item</a></li>
      <li><a href="#">Accordion Inner Item</a></li>
    </ul>
  </div>
</div>

Upvotes: 3

sathish kumar
sathish kumar

Reputation: 1507

$(".title").on("click", function(e) {
	e.preventDefault();
  $(this).toggleClass('title-mob-minus'); // This is for icon
  //hide all list-items
  $(".link-list__items").hide();
  //show sibling list items
  $(this).next().slideToggle();
  return false;
});
.link-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.title {
  float: left;
  width: 100%;
}
.link-list__items {
  float: left;
  width: 100%;
  display: none;
}
.link-list__items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list__items ul li {
  list-style: none;
  display: block;
  padding-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion One</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion Two</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

Change

$(this).next().slideToggle();

to

$(".link-list__items").not($(this).next()).slideUp();
$(this).next().slideToggle();


$(".title").on("click", function(e) {
  e.preventDefault();
  $(this).toggleClass('title-mob-minus'); // This is for icon
  $(".link-list__items").not($(this).next()).slideUp();
  $(this).next().slideToggle();  
  return false;
});
.link-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.title {
  float: left;
  width: 100%;
}
.link-list__items {
  float: left;
  width: 100%;
  display: none;
}
.link-list__items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list__items ul li {
  list-style: none;
  display: block;
  padding-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion One</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion Two</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>

Upvotes: 3

Related Questions