CODEWITHSUNDEEP
javascriptjqueryclosest
Riot Zeast Captain
Riot Zeast Captain

Reputation: 968

why closest is not working?

I was trying to develop the FAQ panel in my page, when I am trying to use the closest() function, it is not working properly, am I doing any mistake, can anyone help me out in this.

heres the code which I wrote

$('.faqQuestion').on('click', function(){
  $(this).parent('.faqData').find('.open').removeClass('open');
  $(this).closest('.faqQuestion').addClass("open");

})
.closed{
	height: 0;
	opacity: 0;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: absolute;
}
.open{
	height: auto;
	opacity: 1;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: relative;
}

.faqQuestion{
	display: inline-block;
    height: 40px;
    float: left;
    width: 100%;
    background: #f0f0f0;
    padding: 5px;
    margin: 2px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}
.faqContent.open{
	padding: 10px;
	border: 1px solid rgba(200, 200, 200, 0.5);
	display: inline-block;
	width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqData clearfix">
  <div class="faqQuestion">
    What is a Virtual Assistant (VA)?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    What is the COST OF OUR SERVICES?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    Why work with our VA?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
</div>

Thanks

zeasts

Upvotes: 0

Views: 108

Answers (4)

Pranav C Balan
Pranav C Balan

Reputation: 115222

The closest() method is using to get closest ancestor element which. In your case use next() method since you want to the sibling which is immediately after the element.

$('.faqQuestion').on('click', function(){
 // remove `open` class and add `closed` class from all elements
  $('.faqContent').removeClass('open').addClass('closed');
  // add `open` class and remove `closed` class from adjuscent sibling
  $(this).next().addClass("open").removeClass('closed');
})
.closed{
	height: 0;
	opacity: 0;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: absolute;
}
.open{
	height: auto;
	opacity: 1;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: relative;
}

.faqQuestion{
	display: inline-block;
    height: 40px;
    float: left;
    width: 100%;
    background: #f0f0f0;
    padding: 5px;
    margin: 2px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}
.faqContent.open{
	padding: 10px;
	border: 1px solid rgba(200, 200, 200, 0.5);
	display: inline-block;
	width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqData clearfix">
  <div class="faqQuestion">
    What is a Virtual Assistant (VA)?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    What is the COST OF OUR SERVICES?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    Why work with our VA?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
</div>

Upvotes: 0

Dinesh undefined
Dinesh undefined

Reputation: 5546

Use $(this).next('.faqContent').addClass("open"); 

$('.faqQuestion').on('click', function(){

  $(this).parent('.faqData').find('.open').removeClass('open').addClass('open');
  $(this).next('.faqContent').addClass("open");
  

})
.closed{
	height: 0;
	opacity: 0;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: absolute;
}
.open{
	height: auto;
	opacity: 1;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: relative;
  display:inline-block;
}

.faqQuestion{
	  display: inline-block;
    height: 40px;
    float: left;
    width: 100%;
    background: #f0f0f0;
    padding: 5px;
    margin: 2px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}
.faqContent.open{
	padding: 10px;
	border: 1px solid rgba(200, 200, 200, 0.5);
	display: inline-block;
	width: 100%;
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqData clearfix">
  <div class="faqQuestion">
    What is a Virtual Assistant (VA)?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    What is the COST OF OUR SERVICES?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    Why work with our VA?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
</div>

Upvotes: 2

Daniel Beck
Daniel Beck

Reputation: 21475

when I click on any faqQuestion, the faqContent should open and if other faqContent is opened, that should be closed.

Keep it simple:

$('.faqQuestion').on('click', function(){
  $('.faqContent').removeClass('open') // close all
  $(this).next('.faqContent').addClass('open') // open the one immediately following what was clicked
})

(It's not clear to me whether you also need to set/remove the .closed class shown in your css; if so you would do that the same way: .addClass('open').removeClass('closed') and vice-versa).

Upvotes: 2

j08691
j08691

Reputation: 207891

You want to select the div that follows the question (faqContent), so .closest(), which traverses up the DOM, isn't what you want. Instead use .next() 

$(this).next().addClass("open");


$('.faqQuestion').on('click', function(){
  $(this).parent('.faqData').find('.open').removeClass('open');
  $(this).next().addClass("open");
})
.closed{
	height: 0;
	opacity: 0;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: absolute;
}
.open{
	height: auto;
	opacity: 1;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: relative;
}

.faqQuestion{
	display: inline-block;
    height: 40px;
    float: left;
    width: 100%;
    background: #f0f0f0;
    padding: 5px;
    margin: 2px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}
.faqContent.open{
	padding: 10px;
	border: 1px solid rgba(200, 200, 200, 0.5);
	display: inline-block;
	width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqData clearfix">
  <div class="faqQuestion">
    What is a Virtual Assistant (VA)?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    What is the COST OF OUR SERVICES?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    Why work with our VA?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
</div>

Upvotes: 1

Related Questions