[vc_row][vc_column][vc_empty_space height=”50px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1447768952401{margin-bottom: -10px !important;}”]

Create an interactive accordion

[/vc_column_text][vc_column_text css=”.vc_custom_1447768968993{margin-right: 5% !important;}”]

This method will allow you to create an interactive accordion with rollover.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1447769011436{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_video link=”https://vimeo.com/103343554″ css=”.vc_custom_1448894712311{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]

1. Start by importing your elements (text, images) on the scene and place them in initial position. Don?t forget to overlay in the layer stack your different elements so they are clearly visible.

There are two types of positions for the elements of our tutorial: initial position (that which they occupy without rollover) and the position on hover (with rollover).

2. In our case, the action layers don?t share the same utility as usual. Here they serve as markers on the scene to position its media. The second and the third correspond to the two thirds of my scene; the first and last ends.

This trick allows us to be faster and not having to check the position in the X (horizontal) when moving one of our items.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”815″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447769279266{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

1. Select one of your images and place it in the position it will occupy at mouse rollover. You will need to move other layers to the visual rendering of this position is correct. The X position of each image has changed on the stage.
   Also place the text block of your image above, in the position he occupied during the rollover
2. Go to the interactions menu and choose an hover action (rollover) of the picture that you just prepare the position.
3. Here, add all of your images in a position X (horizontal). Notice that the X position who is proposed is the one of your images by dragging.

For the texts, make disappear the other two images 400 on the Y axis (vertical), so they are not visible in this rollover picture.

Apply, reposition your images and texts and initial launch preview. Now you can replicate the same principle on the other two images.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”809″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447769375368{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

1. You notice in the preview when you roll your mouse on your text, animation hover doesn?t work anymore. The reason is simple: your text blocks are stacked in the layer stack on top of your images; so they will stop the rollover action.
2. To resolve this problem, click one of your text blocks and assign him a action rollover.
3. Select the image to which it is related and the ?dispatch rollover? action. This action will allow the text to simulate the actions that you configured on the image, making then possible overview of it. Reproduce the operation on the other two texts blocks and run the preview. Don?t forget to push all your items in initial position.Voila, you have created an interactive accordion!

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”812″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447769523295{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]