WoodPecker Logo
WoodPecker Logo

Accordion Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor

Shortcodes
Accordions Alerts Animations Audio Unique Blockquotes Breadcrumbs Buttons Cards Extensive Clients Carousel Code Timers Useful Counters Cicle Counters Comments Dropdown Drop Caps Forms Extensive Flip Boxes Headings Infobox Jumbotron Hovers Unique Lightbox Google Maps Pagination Parallax Unique Progress Bars Transitions Sections Scroll Animate Social Sharing Smooth Scroll Scroll Top Tables Typing Text Video Player Widgets
The Heading For The Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan eu orci id ullamcorper. Ut tempor molestie lorem condimentum auctor. Quisque maximus tristique mi, in dapibus enim consequat non. Nunc rhoncus enim orci, vitae cursus arcu feugiat vitae. Donec in sem ac orci pellentesque egestas. In vel posuere metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae orci non ipsum interdum sollicitudin sed vitae neque. Nunc fringilla facilisis neque eget tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

The Heading For The Accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
The Heading For The Accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Code Snippet To Create Above Results

                                
<div class = "accordion wdpk-accordion" id = "wdpkAccordion">
    <div class = "card">
        <div class = "card-header" id = "headingOne">
            <div class = "mb-0 wdpk-accordion-heading">
                <h6>The Heading For The Accordion</h6>
            </div>
            <div class = "mb-0 wdpk-accordion-button">
                <a class = "btn wdpk-trans-button" id = "toggleOne" data-toggle = "collapse"
                   data-target = "#collapseOne"
                   aria-expanded = "true" aria-controls = "collapseOne">
                    <i class = "fas fa fa-plus"></i>
                </a>
            </div>
        </div>

        <div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne"
             data-parent = "#wdpkAccordion">
            <div class = "card-body">
                <p> ... </p>
            </div>
        </div>
    </div>
    <div class = "card">
        <div class = "card-header" id = "headingTwo">
            <div class = "mb-0 wdpk-accordion-heading">
                <h6>The Heading For The Accordion</h6>
            </div>
            <div class = "mb-0 wdpk-accordion-button">
                <a class = "btn collapsed" id = "toggletwo" data-toggle = "collapse"
                   data-target = "#collapseTwo" aria-expanded = "false"
                   aria-controls = "collapseTwo">
                    <i class = "fas fa fa-plus"></i>
                </a>
            </div>
        </div>
        <div id = "collapseTwo" class = "collapse" aria-labelledby = "headingTwo"
             data-parent = "#wdpkAccordion">
            <div class = "card-body">
               <p> ... </p>
            </div>
        </div>
    </div>
    <div class = "card">
        <div class = "card-header" id = "headingThree">
            <div class = "mb-0 wdpk-accordion-heading">
                <h6>The Heading For The Accordion</h6>
            </div>
            <div class = "mb-0 wdpk-accordion-button">
                <a class = "btn collapsed" id = "toggleThree" data-toggle = "collapse"
                   data-target = "#collapseThree" aria-expanded = "false"
                   aria-controls = "collapseThree">
                    <i class = "fas fa fa-plus"></i>
                </a>
            </div>
        </div>
        <div id = "collapseThree" class = "collapse" aria-labelledby = "headingThree"
             data-parent = "#wdpkAccordion">
            <div class = "card-body">
                <p> ... </p>
            </div>
        </div>
    </div>
</div>
                                
                            
                        
// No changes needed to SCSS Code
                        
                    
                        
// No changes needed to javascript code
© 2019 WoodPecker® HTML Template. All Rights Reserved