javascript - Toggle close other opened div - Stack Overflow

IT技术

更新时间：2025-04-250

admin管理员组
文章数量:1428555

I am trying to figure out how I can close the other div's when I expand one.

Look at my code here:

$( document ).ready(function() {
	$( ".faq-question" ).click(function() {
	
		$(this).toggleClass('open');
		$(this).parent().next('.field-faq-answer').toggle();
	});
	
});

.field-faq-answer{
	display:none;	
}
.faq-antwoord{
	border-bottom: 1px solid #ccc;	
	margin-top:10px;
	padding-bottom:10px;
}
.faq-antwoord p{
	margin-bottom:0px;
	padding-left: 10px;
    border-left: 2px solid #3395d3;
	margin-left:10px;
}
.field-faq-question-first{
	border-top: 1px solid #ccc;	
}

<script src=".11.1/jquery.min.js"></script>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 1
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 1
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 2
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 2
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 3
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 3
        </p>
      </div>
    </div>
</div>

I am trying to figure out how I can close the other div's when I expand one.

Look at my code here:

$( document ).ready(function() {
	$( ".faq-question" ).click(function() {
	
		$(this).toggleClass('open');
		$(this).parent().next('.field-faq-answer').toggle();
	});
	
});

.field-faq-answer{
	display:none;	
}
.faq-antwoord{
	border-bottom: 1px solid #ccc;	
	margin-top:10px;
	padding-bottom:10px;
}
.faq-antwoord p{
	margin-bottom:0px;
	padding-left: 10px;
    border-left: 2px solid #3395d3;
	margin-left:10px;
}
.field-faq-question-first{
	border-top: 1px solid #ccc;	
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 1
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 1
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 2
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 2
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 3
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 3
        </p>
      </div>
    </div>
</div>

It is now possible to click on titel 1 and titel 2 and both content will be shown. But I want only want to show 1 answer and hide others

Share Improve this question asked Aug 25, 2017 at 11:36 Rotan075 2,6155 gold badges37 silver badges56 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 4

To do this you need to call hide() on all other .field-faq-answer elements except the one which was clicked, like this:

$(document).ready(function() {
  $(".faq-question").click(function() {
    $(this).toggleClass('open');
    var $target = $(this).parent().next('.field-faq-answer').toggle();
    $('.field-faq-answer').not($target).hide();
  });
});

.field-faq-answer {
  display: none;
}

.faq-antwoord {
  border-bottom: 1px solid #ccc;
  margin-top: 10px;
  padding-bottom: 10px;
}

.faq-antwoord p {
  margin-bottom: 0px;
  padding-left: 10px;
  border-left: 2px solid #3395d3;
  margin-left: 10px;
}

.field-faq-question-first {
  border-top: 1px solid #ccc;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Titel 1
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 1
      </p>
    </div>
  </div>
</div>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Titel 2
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 2
      </p>
    </div>
  </div>
</div>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Titel 3
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 3
      </p>
    </div>
  </div>
</div>

Try this:

$( document ).ready(function() {
    $( ".faq-question" ).click(function() {

        $('.field-faq-answer').toggle();
        $(this).toggleClass('open'); 
    });

});

You can target all the other elements, except the ones you're working with, and close those

$( document ).ready(function() {
    var questions = $( ".faq-question" ).on('click', function() {
        $(this).toggleClass('open');
        questions.not(this).removeClass('open');

        var answer = $(this).parent().next('.field-faq-answer').toggle();
        $('.field-faq-answer').not(answer).hide();
    });
});

You can use nextAll() method for the parent of parent which is faq-container then use find to select field-FAQ-answer and toggle it.

$(this).parent().parent().nextAll('.faq-container').find('.field-faq-answer').toggle();

$( document ).ready(function() {

	$( ".faq-question" ).click(function() {
  $('.faq-container .field-faq-answer').hide();
		$(this).toggleClass('open');
		$(this).parent().next('.field-faq-answer').toggle();
	});
  
	
});

.field-faq-answer{
	display:none;	
}
.faq-antwoord{
	border-bottom: 1px solid #ccc;	
	margin-top:10px;
	padding-bottom:10px;
}
.faq-antwoord p{
	margin-bottom:0px;
	padding-left: 10px;
    border-left: 2px solid #3395d3;
	margin-left:10px;
}
.field-faq-question-first{
	border-top: 1px solid #ccc;	
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 1
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 1
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 2
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 2
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Titel 3
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 3
        </p>
      </div>
    </div>
</div>

it's work try it.

本文标签： javascriptToggle close other opened divStack Overflow

版权声明：本文标题：javascript - Toggle close other opened div - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745524850a2661788.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Toggle close other opened div - Stack Overflow

5 Answers 5

更多相关文章