JavaScript

Using jQuery’s slideToggle to Show/Hide Repeating Elements Without Flag Handling

 

In web development, there are various techniques to make the user interface (UI) more intuitive and user-friendly. Interactive UIs, where clicking on a question or heading reveals or hides related answers or information, are particularly effective for improving user experience, especially on “Frequently Asked Questions (FAQ)” pages or when you want to display information compactly. In this article, we will introduce how to use the jQuery slideToggle method to display or hide the next text element when clicking on repeated list items (li tags). This method allows you to handle multiple elements at once with simple code, without using flags (state management variables). This approach is widely used on many web pages, making it easy to understand and adaptable.

Contents
  1. Basic Styling with CSS
  2. HTML Structure for List Elements
  3. Adding Interactivity with JavaScript
  4. Demo Page for Displaying/ Hiding Multiple Elements with a Single JavaScript Process
  5. Conclusion

Basic Styling with CSS

First, define the styles of the repeating text elements using CSS. In this example, the part that is clicked to toggle display is referred to as q1, and the part that appears below it is q2. By default, the answer text section is hidden with display: none, but you can modify it as needed. Below is a basic CSS example:

<style>
body {
    font-family: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", Osaka, "ＭＳ Ｐゴシック", Arial, sans-serif;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    line-height: 1.6em;
}
ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 18px;
    line-height: 1.6em;
    text-align: center;
    font-weight: normal;
    padding: 10px 0;
}
ul {
    width: 250px;
    margin: 30px auto;
}
ul li {
    padding: 0 0 0 40px;
    border-bottom: solid 1px #ccc;
}
ul li .q1 {
    font-size: 16px;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    line-height: 36px;
    height: 36px;
}
ul li .q1:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #666;
    top: 16px;
    left: -34px;
}
ul li .q1:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: #666;
    top: 7px;
    left: -25px;
}
ul li .close:after {
    display: none;
}
ul li .q2 {
    font-size: 16px;
    display: none;
    border-top: dotted 1px #ccc;
    line-height: 40px;
    height: 40px;
    color: #007FFF;
    font-weight: bold;
}
</style>

The purpose of this CSS is to style the list elements and prepare them for displaying answers when the question text is clicked. The key point is that the answer section is initially hidden.

HTML Structure for List Elements

Next, create the actual list elements using HTML. Inside the li tags, add the clickable question part (q1) and the answer part (q2) that toggles between show and hide.

<h1>Demo Page for Displaying/ Hiding Multiple Elements with a Single JavaScript Process (Using slideToggle)</h1>

<div align="center">Click on the text parts for Questions 1-3.</div>

<ul>
    <li>
        <div class="q1">Question 1</div>
        <div class="q2">This is the answer for Question 1.</div>
    </li>
    <li>
        <div class="q1">Question 2</div>
        <div class="q2">This is the answer for Question 2.</div>
    </li>
    <li>
        <div class="q1">Question 3</div>
        <div class="q2">This is the answer for Question 3.</div>
    </li>
</ul>

<div align="center">The hidden text for each question will be displayed.<br>After displaying, clicking the question text part again will hide the answer text.</div>

In this HTML structure, the ul tag is used to arrange the questions and answers in a list format. The question part is assigned the class q1, and the answer part is assigned the class q2.

Adding Interactivity with JavaScript

Finally, include the jquery.min.js (v3.6.0) file. Implement the functionality where clicking the question part displays the answer, and clicking it again hides the answer. The slideToggle method is used for smooth show/hide transitions, and toggleClass is used to dynamically change the icon (e.g., + or -) on the question part.

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('ul li .q1').click(function(){
        $(this).toggleClass("close");
        $(this).next('.q2').slideToggle(100);
    });
});
</script>

This script is very simple yet effective. When ul li .q1 is clicked, the subsequent element (q2) slides into view or hides. Additionally, toggleClass is used to change the style of the question part dynamically, indicating whether the question is open or closed.

Demo Page for Displaying/ Hiding Multiple Elements with a Single JavaScript Process

To see this in action, please visit the demo page via the link below. You can observe how multiple elements are displayed or hidden with a single JavaScript process.

Demo for Displaying/ Hiding Multiple Elements with a Single JavaScript Process

Conclusion

The method introduced in this article is very useful for FAQ pages and situations where you need to display summarized information. Even as the number of questions increases, you can handle them with a single script, making maintenance simple and efficient. Additionally, it provides an intuitive and user-friendly interface that can contribute to improving the overall usability of the website.

※ Please use this at your own risk. Do not reuse Google Analytics tags within the head tag.

slideToggle
RELATED POST