Accordion Images
Accordion Images
Use Cases:
This is a great way to graphically display information within a small area. Or use intentionally for a larger area to maximize engagement.
By Hover
Hovering over the images will start the animation/display of information.
With Buttons
Without Buttons
By Click
Hovering over the images will start the animation/display of information.
[dsm_image_accordion image_accordion_type=”on_click” image_accordion_animation=”zoom_in” ia_height=”221px” _builder_version=”4.22.0″ _module_preset=”default” background_color=”#FFFFFF” custom_margin=”||||false|true” custom_padding=”||||false|true” global_colors_info=”{}”][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Valerie-Gu.jpg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” overlay_color=”rgba(148,138,133,0.55)” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover_enabled=”on|desktop” overlay_color__hover=”RGBA(255,255,255,0)”][/dsm_image_accordion_child][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Claire-Curran-1.jpg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” overlay_color=”rgba(148,138,133,0.55)” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover=”RGBA(255,255,255,0)” overlay_color__hover_enabled=”on|desktop”][/dsm_image_accordion_child][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Jonathan-Barnes.jpg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” overlay_color=”rgba(148,138,133,0.55)” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover=”RGBA(255,255,255,0)” overlay_color__hover_enabled=”on|desktop”][/dsm_image_accordion_child][/dsm_image_accordion]
Accordion Images Integrated
Use Cases:
This is a great way to graphically display information within a small flipbox area while still maintaining a larger area of information.
Within Text Areas
Header
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
[dsm_image_accordion ia_height=”221px” _builder_version=”4.22.0″ _module_preset=”default” background_color=”#FFFFFF” custom_margin=”||||false|true” custom_padding=”||||false|true” locked=”off” global_colors_info=”{}”][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Valerie-Gu.jpg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font=”|700|||||||” title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover_enabled=”on|hover” overlay_color__hover=”rgba(94,81,78,0.77)”][/dsm_image_accordion_child][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Claire-Curran-1.jpg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font=”|700|||||||” title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover=”rgba(94,81,78,0.77)” overlay_color__hover_enabled=”on|hover”][/dsm_image_accordion_child][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Jonathan-Barnes.jpg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font=”|700|||||||” title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover=”rgba(94,81,78,0.77)” overlay_color__hover_enabled=”on|hover”][/dsm_image_accordion_child][/dsm_image_accordion]
[dsm_image_accordion ia_height=”221px” _builder_version=”4.22.0″ _module_preset=”default” background_color=”#FFFFFF” custom_margin=”||||false|true” custom_padding=”||||false|true” locked=”off” global_colors_info=”{}”][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/2016-LOGO-American-Legion.jpg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font=”|700|||||||” title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” border_width_all=”2px” border_color_all=”#DBD6D2″ global_colors_info=”{}” overlay_color__hover_enabled=”on|hover” overlay_color__hover=”rgba(94,81,78,0.77)”][/dsm_image_accordion_child][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Catch-Des-Moines-Logo.jpg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font=”|700|||||||” title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” border_width_all=”2px” border_color_all=”#DBD6D2″ global_colors_info=”{}” overlay_color__hover=”rgba(94,81,78,0.77)” overlay_color__hover_enabled=”on|hover”][/dsm_image_accordion_child][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/City-of-WDM.jpeg” use_accordion_icon=”off” image_accordion_title=”HEADER AREA” image_accordion_desc=”Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ” _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font=”|700|||||||” title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px||15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” border_width_all=”1px” border_color_all=”#DBD6D2″ global_colors_info=”{}” overlay_color__hover=”rgba(94,81,78,0.77)” overlay_color__hover_enabled=”on|hover”][/dsm_image_accordion_child][/dsm_image_accordion]
Header
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Header
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
[dsm_image_accordion image_accordion_animation=”push_up” ia_direction=”vertical” ia_height=”501px” _builder_version=”4.22.0″ _module_preset=”default” background_color=”#FFFFFF” width=”100%” custom_margin=”||||false|true” custom_padding=”||||false|true” global_colors_info=”{}”][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/District-Leadership-Directory.jpg” use_accordion_icon=”off” image_accordion_desc=”The contact information for each district chair and committee member can be found by using the directory.” show_ia_button=”on” ia_button_text=”Learn more” ia_button_link_target=”1″ _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px|5px|15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover_enabled=”on|hover” overlay_color__hover=”rgba(94,81,78,0.77)”][/dsm_image_accordion_child][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/How-to-Register-For-Districts.jpg” use_accordion_icon=”off” image_accordion_desc=”When you are ready to register students for the district tournament, use this step-by-step handout to guide you through.” show_ia_button=”on” ia_button_text=”Learn more” ia_button_link_target=”1″ _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px|5px|15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover=”rgba(94,81,78,0.77)” overlay_color__hover_enabled=”on|hover”][/dsm_image_accordion_child][/dsm_image_accordion]
[dsm_image_accordion image_accordion_animation=”push_up” ia_direction=”vertical” ia_height=”501px” _builder_version=”4.22.0″ _module_preset=”default” background_color=”#FFFFFF” width=”100%” custom_margin=”||||false|true” custom_padding=”||||false|true” global_colors_info=”{}”][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Sinlge-Entry-Letter-of-Intent.jpg” use_accordion_icon=”off” image_accordion_desc=”No student may double enter at the National Tournament. Therefore, a Single Entry Letter of Intent (SELI) must be filed with the district chair indicating the event in which the student will compete at the National Tournament, should they qualify.” show_ia_button=”on” ia_button_text=”Learn more” ia_button_link_target=”1″ _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px|5px|15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover_enabled=”on|hover” overlay_color__hover=”rgba(94,81,78,0.77)”][/dsm_image_accordion_child][dsm_image_accordion_child image_accordion_src=”https://www.speechanddebate.org/wp-content/uploads/Congress-Legislation-Template-2.jpg” use_accordion_icon=”off” image_accordion_desc=”Students wanting to submit legislation for consideration at the National Tournament should use these templates when writing their legislation to ensure style and formatting are consistent with the rules.” show_ia_button=”on” ia_button_text=”Learn more” ia_button_link_target=”1″ _builder_version=”4.22.0″ _module_preset=”default” title_level=”h1″ title_font_size=”26px” desc_font_size=”15px” background_color=”#948A85″ background_enable_color=”on” custom_margin=”|15px|5px|15px|false|true” custom_padding=”|15px||15px|false|true” border_radii=”on|9px|9px|9px|9px” global_colors_info=”{}” overlay_color__hover=”rgba(94,81,78,0.77)” overlay_color__hover_enabled=”on|hover”][/dsm_image_accordion_child][/dsm_image_accordion]