Can you help me create a CSS Toggle similar to this design?

Question

Can you help me create a CSS Toggle similar to this design?

I am currently working on a website and I need to create a FAQs page with a specific layout.

When a user clicks on a question (Q), the answer (A) should open smoothly using jQuery animation. Only one question should be visible at a time.

If a user clicks on another question, the previous one should close automatically and the newly clicked question will be opened.

<div class="faqBlock">

    <div class="qa">
        <dt>How can I purchase Snoopra?</dt>
        <dd>To buy Snoopra, simply choose between monthly or yearly payment options, click on the buy now button, enter your payment information, and you're good to go!</dd>
    </div><!-- qa -->

</div><!-- faqBlock -->

jquery css toggle

Answer 1

Answer №1

We have found a solution to the issue you raised. We believe it meets your requirements.

http://jsfiddle.net/ardeezstyle/ESLEB/1/

$(document).delegate('.q','click',function(){
    $('.a').hide();
    $(this).next('.a').show();
});

Answer 2

We have found a solution to the issue you raised. We believe it meets your requirements.

http://jsfiddle.net/ardeezstyle/ESLEB/1/

$(document).delegate('.q','click',function(){
    $('.a').hide();
    $(this).next('.a').show();
});

Answer 3

Answer №2

Introducing the amazing accordion effect and the simplest way to create it:

$('.faq-question').click(function(){
  $(this).next().slideToggle();
});

.faq-question > *{margin:0; padding:8px 16px;} /* all */
.faq-question > h3{cursor:pointer; border-top: 1px solid #eee;} /* questions */
.faq-question > div{display:none;} /* Hide all answers */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-question">
  <h3>Question 1</h3>
  <div>answer 1...</div>
  <h3>Question 2</h3>
  <div>answer 2...</div>
  <h3>Question 3</h3>
  <div>answer 3...</div>
</div>

To easily toggle between questions:

$('.faq-question').each(function() {
  
  var $question = $(this).find("> h3"),
      $answer = $(this).find("> div");

  $question.click(function() {
    var $faq = $(this).next(); // Get the question's answer
    $answer.not($faq).slideUp();    // Close all answers (not the clicked one)
    $faq.slideToggle();        // Toggle answer
  });

});

.faq-question > *{margin:0; padding:8px 16px;} /* all */
.faq-question > h3{cursor:pointer; border-top: 1px solid #eee;} /* questions */
.faq-question > div{display:none;} /* Hide all answers */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-question">
  <h3>Question 1</h3>
  <div>answer 1...</div>
  <h3>Question 2</h3>
  <div>answer 2...</div>
  <h3>Question 3</h3>
  <div>answer 3...</div>
</div>

Answer 4

Introducing the amazing accordion effect and the simplest way to create it:

$('.faq-question').click(function(){
  $(this).next().slideToggle();
});

.faq-question > *{margin:0; padding:8px 16px;} /* all */
.faq-question > h3{cursor:pointer; border-top: 1px solid #eee;} /* questions */
.faq-question > div{display:none;} /* Hide all answers */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-question">
  <h3>Question 1</h3>
  <div>answer 1...</div>
  <h3>Question 2</h3>
  <div>answer 2...</div>
  <h3>Question 3</h3>
  <div>answer 3...</div>
</div>

To easily toggle between questions:

$('.faq-question').each(function() {
  
  var $question = $(this).find("> h3"),
      $answer = $(this).find("> div");

  $question.click(function() {
    var $faq = $(this).next(); // Get the question's answer
    $answer.not($faq).slideUp();    // Close all answers (not the clicked one)
    $faq.slideToggle();        // Toggle answer
  });

});

.faq-question > *{margin:0; padding:8px 16px;} /* all */
.faq-question > h3{cursor:pointer; border-top: 1px solid #eee;} /* questions */
.faq-question > div{display:none;} /* Hide all answers */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-question">
  <h3>Question 1</h3>
  <div>answer 1...</div>
  <h3>Question 2</h3>
  <div>answer 2...</div>
  <h3>Question 3</h3>
  <div>answer 3...</div>
</div>

Answer 5

Answer №3

Check out the slideToggle() function for a handy animation effect.

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // You can add custom code here.
  });
});

See an example here

Answer 6

Check out the slideToggle() function for a handy animation effect.

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // You can add custom code here.
  });
});

See an example here

Can you help me create a CSS Toggle similar to this design?

Answer №1

Answer №2

To easily toggle between questions:

Answer №3

Similar questions

What could be the reason for Firefox cutting off circular PNG images at the bottom?

Is there a limit to the number of else if statements I can use? The final else statement

What is the best way to include a form within every row of an HTML datatables structure?

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

The data type 'string' cannot be assigned to the data type 'Position'

`Responsive Site with Centered Image Overlay`

Tips for restricting text within a div container

Issues with functionality of Bootstrap carousel slider

Each container has its own div counter

`Positioning of inline-block elements`

Can the minimum length be automatically filled between two elements?

Interactive Map Displayed within a Pop-up Window

Fully responsive header designed for optimal experience at any screen height

Ways to ensure that the dropdown content remains visible even after the mouse has exited the trigger element

The value of `$(this).data('dynamic_id')` is only defined within the `alert` function

Challenges when working with AJAX/jQuery in terms of fetching JSON data and setting dataType

Styling with CSS based on the remaining width of the viewport relative to the height

Two miniature tables placed next to each other within a single cell, both sharing equal height

Troubleshooting Vue 3 Options API custom element with non-functional Bootstrap js files

What could be the reason for Jquery post not successfully transmitting data?