Home Example Pages Features Shortcodes Accordion & Toggle

Accordion

WE LISTEN, WE DISCUSS, WE ADVISE AND DEVELOP
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
WE CARE ABOUT OUR CLIENTS AND CAN MAKE THEIR LIFE EASIER
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
WE LOVE TO LEARN AND USE THE LATEST TECHNOLOGIES
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
OFFERING FEATURE RICH, PROFESSIONAL PRODUCT
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.

HTML Shortcode

Add Text/HTML module to the page with the below HTML content.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 

<div class="shortcode_accordion_shortcode accordion">
    <h5 class="shortcode_accordion_item_title" data-count="1">
        WE LISTEN, WE DISCUSS, WE ADVISE AND DEVELOP <span class="ico"></span>
    </h5>
    <div class="shortcode_accordion_item_body">
        <div class="ip">
            Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
            eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
            nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
            quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
            lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
            sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
        </div>
    </div>
    <h5 class="shortcode_accordion_item_title expanded_yes" data-count="2">
        WE CARE ABOUT OUR CLIENTS AND CAN MAKE THEIR LIFE EASIER <span class="ico"></span>
    </h5>
    <div class="shortcode_accordion_item_body">
        <div class="ip">
            Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
            eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
            nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
            quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
            lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
            sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
        </div>
    </div>
    <h5 class="shortcode_accordion_item_title" data-count="3">
        WE LOVE TO LEARN AND USE THE LATEST TECHNOLOGIES <span class="ico"></span>
    </h5>
    <div class="shortcode_accordion_item_body">
        <div class="ip">
            Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
            eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
            nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
            quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
            lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
            sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
        </div>
    </div>
    <h5 class="shortcode_accordion_item_title" data-count="4">
        OFFERING FEATURE RICH, PROFESSIONAL PRODUCT <span class="ico"></span>
    </h5>
    <div class="shortcode_accordion_item_body">
        <div class="ip">
            Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
            eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
            nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
            quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
            lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
            sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
        </div>
    </div>
</div>

Implementation Instructions:

To Add or Remove Pane:
Add or Remove the below HTML content. Make sure data-count is sequential for all panes after adding or removing any pane.

1
2
3
4
5
6
7
8
9
 
<h5 class="shortcode_accordion_item_title" data-count="5">
    New Pane <span class="ico"></span>
</h5>
<div class="shortcode_accordion_item_body">
    <div class="ip">
        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
        eros enatis at dapibus facilisis, lacinia sagittis purus.
    </div>
</div>

Toggle

WE LISTEN, WE DISCUSS, WE ADVISE AND DEVELOP
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
WE CARE ABOUT OUR CLIENTS AND CAN MAKE THEIR LIFE EASIER
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
WE LOVE TO LEARN AND USE THE LATEST TECHNOLOGIES
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
OFFERING FEATURE RICH, PROFESSIONAL PRODUCT
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.

HTML Shortcode

Add Text/HTML module to the page with the below HTML content.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<div class="shortcode_toggles_shortcode toggles">
    <h5 class="shortcode_toggles_item_title expanded_no" data-count="1">
        WE LISTEN, WE DISCUSS, WE ADVISE AND DEVELOP <span class="ico"></span>
    </h5>
    <div class="shortcode_toggles_item_body">
        <div class="ip">
            Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
            eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
            nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
            quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
            lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
            sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
        </div>
    </div>
    <h5 class="shortcode_toggles_item_title expanded_yes" data-count="2">
        WE CARE ABOUT OUR CLIENTS AND CAN MAKE THEIR LIFE EASIER <span class="ico"></span>
    </h5>
    <div class="shortcode_toggles_item_body">
        <div class="ip">
            Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
            eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
            nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
            quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
            lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
            sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
        </div>
    </div>
    <h5 class="shortcode_toggles_item_title expanded_no" data-count="3">
        WE LOVE TO LEARN AND USE THE LATEST TECHNOLOGIES <span class="ico"></span>
    </h5>
    <div class="shortcode_toggles_item_body">
        <div class="ip">
            Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
            eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
            nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
            quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
            lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
            sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
        </div>
    </div>
    <h5 class="shortcode_toggles_item_title expanded_no" data-count="4">
        OFFERING FEATURE RICH, PROFESSIONAL PRODUCT <span class="ico"></span>
    </h5>
    <div class="shortcode_toggles_item_body">
        <div class="ip">
            Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
            eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
            nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
            quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
            lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
            sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.
        </div>
    </div>
</div>

Implementation Instructions:

To Add or Remove Toggle:
Add or Remove the below HTML content. Make sure data-count is sequential for all toggles after adding or removing any toggle.

1
2
3
4
5
6
7
8
9
 
<h5 class="shortcode_toggles_item_title expanded_no" data-count="5">
    New Toogle <span class="ico"></span>
</h5>
<div class="shortcode_toggles_item_body">
    <div class="ip">
        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
        eros enatis at dapibus facilisis, lacinia sagittis purus.
    </div>
</div>