Creating a toggle button for a div element to expand and collapse its content: Step-by-step guide

Question

Creating a toggle button for a div element to expand and collapse its content: Step-by-step guide

For my e-commerce site selling musical instruments, I'm designing a product landing page that showcases guitars, keyboards, violins, and cellos. As part of the design, I want to include expandable sections with detailed information about each instrument.

To achieve this, I have added specific styling and functionality using CSS code snippets for each instrument category - guitar, keyboard, violin, and cello. Each section includes a brief description, an image, and a link for more information.

The challenge I'm facing is implementing a "show more" button below the keyboard section, which would reveal additional content when clicked. Despite searching for solutions online, I haven't been able to find a suitable answer yet.

javascript html css frontend

Answer 1

Answer №1

@Alok Marathe, kindly review the code below for your specific issue. Many resources on stackoverflow can provide insight into how to implement a show more functionality. Examples with working solutions are available for reference.

For additional details, please refer to this Stack Overflow link and examine the provided code snippet:

stack-overflow

jQuery(document).ready(function ($) {

    // This will execute upon page load when the document is ready
    if ($('.product-info-box').length > 2) {
        $('.product-info-box:gt(1)').hide();
        $('.showmore').show();
    }

    $('.showmore button').on('click', function () {
        // Toggle elements with class that have an index greater than 2
        $('.product-info-box:gt(1)').toggle();
        // Change text of show more element for demonstration purposes
        $(this).text() === 'Show less' ? $(this).text('Show more') : $(this).text('Show less');
    });

});

/* Sample CSS - No implementation needed */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* Your CSS Styles Here */

.product_info_scroll {    
    /* Fixed div height */
}

.showmore {
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="product-info" class="product-info">
        <b>Instruments our brand serves: </b>
        <div class="product_info_scroll">
            
            <div class="guitar product-info-box">
                <div id="guitarbox">
                    <div id="guitarcontent">
                        <h1>Guitar</h1>
                        <p>Description here...</p>
                    </div>
                    <div id="guitarimg">
                        <a href="" target="_blank">
                            <img src="/images/electric-guitar.jpg" width="500px">
                        </a>
                    </div>
                </div>
            </div>

            <div class="keyboard product-info-box">
                <div id="keyboardbox">
                    <div id="keyboardcontent">
                        <h1>Keyboard</h1>
                        <p>Description here...</p>
                    </div>
                    <div id="keyboardimg">
                        <a href="" target="_blank">
                            <img src="/images/keyboard2.png" width="500px">
                        </a>
                    </div>
                </div>
            </div>

            <div class="violin product-info-box">
                <div id="violinbox">
                    <div id="violincontent">
                        <h1>Violin</h1>
                        <p>Description here...</p>
                    </div>
                    <div id="violinimg">
                        <a href="" target="_blank">
                            <img src="/images/violin.jpg" width="500px">
                        </a>
                    </div>
                </div>
            </div>

            <div class="cello product-info-box">
                <div id="cellobox">
                    <div id="cellocontent">
                        <h1>Cello</h1>
                        <p>Description here...</p>
                    </div>
                    <div id="celloimg">
                        <a href="" target="_blank">
                            <img src="/images/cello2.jpeg" width="500px">
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <div class="showmore">
            <button type="button">Show More</button>
        </div>
    </section>

Answer 2

@Alok Marathe, kindly review the code below for your specific issue. Many resources on stackoverflow can provide insight into how to implement a show more functionality. Examples with working solutions are available for reference.

For additional details, please refer to this Stack Overflow link and examine the provided code snippet:

stack-overflow

jQuery(document).ready(function ($) {

    // This will execute upon page load when the document is ready
    if ($('.product-info-box').length > 2) {
        $('.product-info-box:gt(1)').hide();
        $('.showmore').show();
    }

    $('.showmore button').on('click', function () {
        // Toggle elements with class that have an index greater than 2
        $('.product-info-box:gt(1)').toggle();
        // Change text of show more element for demonstration purposes
        $(this).text() === 'Show less' ? $(this).text('Show more') : $(this).text('Show less');
    });

});

/* Sample CSS - No implementation needed */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* Your CSS Styles Here */

.product_info_scroll {    
    /* Fixed div height */
}

.showmore {
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="product-info" class="product-info">
        <b>Instruments our brand serves: </b>
        <div class="product_info_scroll">
            
            <div class="guitar product-info-box">
                <div id="guitarbox">
                    <div id="guitarcontent">
                        <h1>Guitar</h1>
                        <p>Description here...</p>
                    </div>
                    <div id="guitarimg">
                        <a href="" target="_blank">
                            <img src="/images/electric-guitar.jpg" width="500px">
                        </a>
                    </div>
                </div>
            </div>

            <div class="keyboard product-info-box">
                <div id="keyboardbox">
                    <div id="keyboardcontent">
                        <h1>Keyboard</h1>
                        <p>Description here...</p>
                    </div>
                    <div id="keyboardimg">
                        <a href="" target="_blank">
                            <img src="/images/keyboard2.png" width="500px">
                        </a>
                    </div>
                </div>
            </div>

            <div class="violin product-info-box">
                <div id="violinbox">
                    <div id="violincontent">
                        <h1>Violin</h1>
                        <p>Description here...</p>
                    </div>
                    <div id="violinimg">
                        <a href="" target="_blank">
                            <img src="/images/violin.jpg" width="500px">
                        </a>
                    </div>
                </div>
            </div>

            <div class="cello product-info-box">
                <div id="cellobox">
                    <div id="cellocontent">
                        <h1>Cello</h1>
                        <p>Description here...</p>
                    </div>
                    <div id="celloimg">
                        <a href="" target="_blank">
                            <img src="/images/cello2.jpeg" width="500px">
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <div class="showmore">
            <button type="button">Show More</button>
        </div>
    </section>

Creating a toggle button for a div element to expand and collapse its content: Step-by-step guide

Answer №1

Similar questions

How about creating a fresh variable in Assemble or merging two comparison helpers together?

Could jQuery and CSS be utilized for image enlargement?

Click once to expand all rows in the table with ease

Unable to view videos shared by users in PeerJS and WebRTC video chat application from different tabs

Re-rendering a Highcharts chart for optimal display

What could be causing the 404 Ajax not found error in my script?

How can I replace the unsightly "Web page not available" error in WebView on Android with a more visually pleasing alternative?

When moving to a different page, PHP seems to have a problem keeping the session values in place

What is the best way to align text in the middle on smaller devices like phones and iPads?

Vuetify Card Overflow: Handling Multiline Text with Ellipsis

An error occurs in the console stating 'Maximum call stack size exceeded' when trying to add data to the database using JavaScript

Exploring Angular 2 Tabs: Navigating Through Child Components

Trigger a notification based on the selected choice

Using Vue.js to connect v-html to a custom CSS stylesheet

Issue with setTimeout function when used in conjunction with an ajax call

How can I enable two-finger scrolling on mobile web browsers?

Steps to open and configure a Mobile-Angular modal from another controller

JavaScript function to copy the first row of a table to the clipboard

What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height