Building an Expand/Collapse Text Section Using Pure HTML, CSS, and JavaScript

Creating an expand/collapse feature for text sections in your website is a simple yet effective way to improve user experience without relying on plugins. In this article, we'll explore how to achieve this using only HTML, CSS, and JavaScript. We'll also discuss the benefits of doing so, including faster load times and improved security.

Why Use HTML, CSS, and JavaScript?

When you use plugins for expand/collapse features, they can introduce additional load times and vulnerabilities. Modern web development tools, such as HTML, CSS, and JavaScript, provide a powerful yet lightweight solution to achieve the same functionality. By using these technologies, you can ensure your website loads faster and remains more secure.

The Basic Structure

Let's start with the basic HTML structure. The expand/collapse functionality consists of a button or trigger that, when clicked, reveals or hides the corresponding content.

HTML Code

html 
head
    meta charset
    titleExpand/Collapse Example/title
    link relstylesheet hrefstyles.css
/head
body
    div classcontainer
        button classtoggle-buttonShow More/button
        div classcontent
            pThis is the content that can be expanded or collapsed. You can put any information here such as text, images, or other HTML elements./p
        /div
    /div
    script srcscript.js/script
/body
/html

Styling with CSS

Next, let's look at the CSS to style our expand/collapse section. We will initially hide the content and style the button and content area.

CSS Code

.container {
    margin: 20px;
}
.content {
    display: none; /* Initially hide the content */
    margin-top: 10px;
}

Control with JavaScript

Finally, we'll write the JavaScript code to toggle the visibility of the content when the button is clicked. This will change the button text and show or hide the content accordingly.

JavaScript Code

function toggleContent() {
    const content  document.querySelector(#39;.content#39;);
    const button  document.querySelector(#39;.toggle-button#39;);
    if (  #39;none#39;) {
          #39;block#39;;
        button.textContent  #39;Show Less#39;;
    } else {
          #39;none#39;;
        button.textContent  #39;Show More#39;;
    }
}

Customizing Further

The example above is a basic implementation. You can customize the styles and content to fit your needs. For instance, you might want to add animations, change the button text colors, or adjust the layout.

Enhanced Example with Accordion

For a more advanced implementation, you can create an accordion-style expand/collapse feature. This involves creating multiple expand/collapse sections that share a common button or header.

HTML Code for Accordion

div classcontainer
    div classaccordion
        ul
            li
                div classquestion
                    h2FAQ 1/h2
                    span classtoggle-button/span
                /div
                div classanswer
                    pZee Ahmed consectetur adipisicing elit. Exercitationem dolorum dolore totam quo commodi sapiente in libero consectetur similique labore non provident dolorem quibusdam quos corporis facere est quod deserunt./p
                /div
            /li
            li
                div classquestion
                    h2FAQ 2/h2
                    span classtoggle-button/span
                /div
                div classanswer
                    pLorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem dolorum dolore totam quo commodi sapiente in libero consectetur similique labore non provident dolorem quibusdam quos corporis facere est quod deserunt./p
                /div
            /li
            li
                div classquestion
                    h2FAQ 3/h2
                    span classtoggle-button/span
                /div
                div classanswer
                    pLorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem dolorum dolore totam quo commodi sapiente in libero consectetur similique labore non provident dolorem quibusdam quos corporis facere est quod deserunt./p
                /div
            /li
        /ul
    /div
/div

Complete Example with CSS

Here's the CSS to style the accordion:

body {
    padding: 30px;
}
html {
    overflow-y: scroll;
}
body {
    background: #EFEFEF;
}
ul {
    margin-bottom: 0;
}
.accordion {
    background: #FFF;
    border-radius: 5px;
    padding: 30px;
}
.question {
    border-top: 1px solid #EEE;
    padding: 20px;
    cursor: pointer;
    position: relative;
}
.question h2 {
    font-size: 20px;
    margin: 0;
    color: #C00C00;
}
.question .toggle-button {
    position: absolute;
    right: 20px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    color: #C00C00;
    transition: .75s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.answer {
    max-height: 0;
    overflow: hidden;
    transition: .75s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.answer p {
    padding: 20px;
}
.accordion .question .toggle-button {
    transform: rotate(180deg);
}
.accordion .answer {
    max-height: 150px;
}

JavaScript for Accordion

Define the variables for the accordion sections:

// Variables
var accordion  document.querySelector(#39;.accordion#39;);
var items  accordion.querySelectorAll(#39;li#39;);
var questions  accordion.querySelectorAll(#39;.question#39;);

Create a function to toggle the accordion sections:

// Functions
function toggleAccordion(item) {
    if (item  open) {
        return;
    }
    open  item;
}

Add event listeners to the questions:

// Event Listeners
(function(question) {
    (click, function() {
        toggleAccordion(this);
    });
});

Conclusion

By using HTML, CSS, and JavaScript, you can create an expand/collapse text section without the need for plugins, ensuring a faster, more secure, and user-friendly experience for your website visitors. The provided examples serve as a starting point for your own customizations and integrations.