How to stop repeating with jquery?

Question

This is my first plugin with jquery and I have some bug to fix and learn.

My issues

• Click title more than one, over and over then see my accordion will be open as much as you click.I want to prevent it.
• I have visible accordion by default and if I click it my accordion is not closing it's opening again

$(function(){
    var title = $(".title");
  title.on("click",function(){
    $(".title").removeClass("active");
    $(this).toggleClass("active");
      $(".text").slideUp();
      $(this).parents(".item").find(".text").slideToggle();
  });
});

@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900');
body {
  background: #1d1f20;
  font-family: 'Work Sans', sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  padding: 0;
  margin: 0;
}

#accordion {
  width: 600px;
  margin: 30px auto;
  background: #FFF;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

#accordion:before,
#accordion:after {
  content: "";
  display: table;
  clear: both;
}

.title {
  position: relative;
  background: #FC4349;
  color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #ed383e;
  border-left: 5px solid #ed383e;
  font-size: 14px;
}

.active {
  border-left-color: #bf262b;
}

.title:after {
  content: "\f107";
  display: block;
  position: absolute;
  right: 3%;
  top: 20%;
  font-family: FontAwesome;
  font-size: 20px;
}

.active:after {
  content: "\f106";
  display: block;
}

.fa {
  padding-right: 12px;
}

.text {
  padding: 12px;
  display: none;
}

.text p {
  padding-bottom: 10px;
  font-size: 13px;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.active+.text {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="accordion">

  <div class="item">
    <div class="title"><i class="fa fa-file-text" aria-hidden="true"></i>Accordion 1</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ratione dolor tenetur recusandae doloremque molestias itaque aspernatur fugiat quidem! Dolorum incidunt amet voluptatibus quas illo facilis nobis nulla dolorem iure!</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam at velit quia recusandae eius iste minus blanditiis, atque, laboriosam hic iusto magnam ducimus necessitatibus et inventore. Animi, qui, voluptatibus. Eligendi?</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-cog" aria-hidden="true"></i> Accordion 2</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, eos.</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title active"><i class="fa fa-envira" aria-hidden="true"></i> Accordion 3</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aspernatur cum minima nesciunt modi sunt unde eaque atque, ipsam, officia fugiat incidunt dolor molestiae ullam laudantium tempora, enim odio ratione?</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-pie-chart" aria-hidden="true"></i> Accordion 4</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <!-- item-->


  <div class="item">
    <div class="title"><i class="fa fa-bar-chart" aria-hidden="true"></i> Accordion 5</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nisi ratione totam placeat delectus, omnis illo sit aliquid error est fugit repellat expedita assumenda quam quaerat quas vel sapiente ullam possimus, repudiandae molestias. Deserunt
        ducimus illum iure iusto reprehenderit nam, neque, quia porro? Ea officia accusamus molestiae, odit assumenda non laboriosam quibusdam hic iusto, debitis distinctio ipsa ducimus neque nam magnam mollitia labore, unde commodi repellendus repellat!
        Quis, quaerat impedit.</p>
    </div>
  </div>
  <!-- item-->
</div>
<!--/ accordion -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CodePen Demo

Answer 1

I hope it will solve your issue.

$(".title").click(function(){
    if($(this).hasClass('active')){
      $(this).removeClass("active"); 
      $(this).parents(".item").find(".text").slideUp();
    } else {
      $(".title").removeClass("active"); 
      $(this).toggleClass("active"); 
      $(".text").slideUp();
      $(this).parents(".item").find(".text").slideDown();
    }   
})

@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900');

body{
  background: #1d1f20;
  font-family: 'Work Sans', sans-serif;
}
body,h1,h2,h3,h4,h5,h6,p,span{
  padding:0;
  margin:0;
}
#accordion{
  width:600px;
  margin:30px auto;
  background:#FFF;
  border-radius:4px;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
#accordion:before,#accordion:after{
  content:"";
  display:table;
  clear:both;
}
.title{
  position:relative;
  background: #FC4349;
  color:#f0f0f0;
  padding:10px;
  cursor:pointer;
  display:block;
  border-bottom:1px solid #ed383e;
  border-left: 5px solid #ed383e;
  font-size:14px;
}
.active{
  border-left-color:#bf262b;
}
.title:after{
  content:"\f107";
  display:block;
  position:absolute;
  right:3%;
  top:20%;
  font-family:FontAwesome;
  font-size:20px;
}
.active:after{
  content:"\f106";
  display:block;
}
.fa{
  padding-right:12px;
}
.text{
  display: none;
  padding:12px;
  height: auto;
  overflow: hidden;
}
.text p {
  padding-bottom:10px;
  font-size:13px;
  line-height:24px;
  color:#333;
  text-align:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="accordion">
  
   <div class="item">
    <div class="title"><i class="fa fa-file-text" aria-hidden="true"></i>Accordion 1</div>
     <div class="text">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ratione dolor tenetur recusandae doloremque molestias itaque aspernatur fugiat quidem! Dolorum incidunt amet voluptatibus quas illo facilis nobis nulla dolorem iure!</p>
       
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam at velit quia recusandae eius iste minus blanditiis, atque, laboriosam hic iusto magnam ducimus necessitatibus et inventore. Animi, qui, voluptatibus. Eligendi?</p>
     </div>
  </div><!-- item-->
  
   <div class="item">
    <div class="title"><i class="fa fa-cog" aria-hidden="true"></i>
Accordion 2</div>
     <div class="text">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
       
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, eos.</p>
     </div>
  </div><!-- item-->
  
   <div class="item">
    <div class="title"><i class="fa fa-envira" aria-hidden="true"></i>
Accordion 3</div>
     <div class="text">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aspernatur cum minima nesciunt modi sunt unde eaque atque, ipsam, officia fugiat incidunt dolor molestiae ullam laudantium tempora, enim odio ratione?</p>
     </div>
  </div><!-- item-->
  
   <div class="item">
    <div class="title"><i class="fa fa-pie-chart" aria-hidden="true"></i>
Accordion 4</div>
     <div class="text">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
       <p>Lorem ipsum dolor sit amet.</p>
     </div>
  </div><!-- item-->
  
  
   <div class="item">
    <div class="title"><i class="fa fa-bar-chart" aria-hidden="true"></i>
Accordion 5</div>
     <div class="text">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nisi ratione totam placeat delectus, omnis illo sit aliquid error est fugit repellat expedita assumenda quam quaerat quas vel sapiente ullam possimus, repudiandae molestias. Deserunt ducimus illum iure iusto reprehenderit nam, neque, quia porro? Ea officia accusamus molestiae, odit assumenda non laboriosam quibusdam hic iusto, debitis distinctio ipsa ducimus neque nam magnam mollitia labore, unde commodi repellendus repellat! Quis, quaerat impedit.</p>
     </div>
  </div><!-- item-->
</div><!--/ accordion -->

Answer 2

Simple change done in your javascript code and its working as you expected :

$(function(){
    var title = $(".title");
  title.on("click",function(){
    if($(this).hasClass("active") == false) $(".text").slideUp();
    $(this).parents(".item").find(".text").slideToggle();
    $(".title").removeClass("active");
    $(this).addClass("active");      
  });
});

Answer 3

Please remove the following css

.active+.text {
  display: block;
} 

and add the code given below

.text.active{
  display: block;
}

also add the class "active" to default block to open

Answer 4

What do you expect this part of code should do in your css

.active+.text {
  display: block;
}

remove this part of code .. And This in not my problem .. I don't know what the foolish to downvote .. while .not() is a right answer

You need to use .not()

$(".title").not($(this)).removeClass("active");

and

$(".text").not($(this).parents(".item").find(".text")).slideUp();

$(function(){
    var title = $(".title");
  title.on("click",function(){
    var ThisIt = $(this);
    $(".title").not(ThisIt).removeClass("active");
    $(this).toggleClass("active");
    $(".text").not(ThisIt.next(".text")).slideUp(100);
    ThisIt.next(".text").slideToggle(100);
  }).eq(2).click();
});

@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900');
body {
  background: #1d1f20;
  font-family: 'Work Sans', sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  padding: 0;
  margin: 0;
}

#accordion {
  width: 600px;
  margin: 30px auto;
  background: #FFF;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

#accordion:before,
#accordion:after {
  content: "";
  display: table;
  clear: both;
}

.title {
  position: relative;
  background: #FC4349;
  color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #ed383e;
  border-left: 5px solid #ed383e;
  font-size: 14px;
}

.active {
  border-left-color: #bf262b;
}

.title:after {
  content: "\f107";
  display: block;
  position: absolute;
  right: 3%;
  top: 20%;
  font-family: FontAwesome;
  font-size: 20px;
}

.active:after {
  content: "\f106";
  display: block;
}

.fa {
  padding-right: 12px;
}

.text {
  padding: 12px;
  display: none;
}

.text p {
  padding-bottom: 10px;
  font-size: 13px;
  line-height: 24px;
  color: #333;
  text-align: left;
}

/*.active+.text {
  display: block;
}*/

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="accordion">

  <div class="item">
    <div class="title"><i class="fa fa-file-text" aria-hidden="true"></i>Accordion 1</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ratione dolor tenetur recusandae doloremque molestias itaque aspernatur fugiat quidem! Dolorum incidunt amet voluptatibus quas illo facilis nobis nulla dolorem iure!</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam at velit quia recusandae eius iste minus blanditiis, atque, laboriosam hic iusto magnam ducimus necessitatibus et inventore. Animi, qui, voluptatibus. Eligendi?</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-cog" aria-hidden="true"></i> Accordion 2</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, eos.</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-envira" aria-hidden="true"></i> Accordion 3</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aspernatur cum minima nesciunt modi sunt unde eaque atque, ipsam, officia fugiat incidunt dolor molestiae ullam laudantium tempora, enim odio ratione?</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-pie-chart" aria-hidden="true"></i> Accordion 4</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <!-- item-->


  <div class="item">
    <div class="title"><i class="fa fa-bar-chart" aria-hidden="true"></i> Accordion 5</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nisi ratione totam placeat delectus, omnis illo sit aliquid error est fugit repellat expedita assumenda quam quaerat quas vel sapiente ullam possimus, repudiandae molestias. Deserunt
        ducimus illum iure iusto reprehenderit nam, neque, quia porro? Ea officia accusamus molestiae, odit assumenda non laboriosam quibusdam hic iusto, debitis distinctio ipsa ducimus neque nam magnam mollitia labore, unde commodi repellendus repellat!
        Quis, quaerat impedit.</p>
    </div>
  </div>
  <!-- item-->
</div>
<!--/ accordion -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 5

Adjust your javascript code. The toggle function will do all the work.

$(function() {
  $(document).on("click", ".title", function() {
    $(this).siblings(".text").slideToggle();
  });
});