Follow

Creating an accordion style section

In Pixel Together, you can create an accordion style section. These sections are often used for a FAQ section on a website but can be used for many different reasons. 

Step 1 - Create sections

Add two Sections to your page. If you're creating this for a FAQ section, name the first section 'Question' and the second one 'Answer'. You can do this by double clicking on the section in the sections tab or by clicking on the properties box at the top right hand corner of the section. 

accordion_-_image_1.jpg

Add your text to each section. For example, your question in the first and the answer in the second. 

accordion_-_image_2.jpg

Step 2 - Add icon 

If you would like an icon to link to the drop down section, you can find an icon on websites such as thenounproject.com. Download your icon. For example, you could get an arrow pointing down. 

Add this icon as an image onto your page and place in the first section. 

accordion__-_image_3.jpg

Step 3 - Add link

Add a link to your your icon and/or your text in the first section. You can do this by clicking on the icon/text and clicking on the links tab. Link it to 'section' and 'answer' or the name of the second section. 

accordion_-_image_4.jpg

Step 4 - Make section invisible 

Go into the sections tab on the left of your canvas and click the eye icon next to the second section. This will make it in invisible until the text/icon in the first section has been clicked. 

accrodion_-_image_5.jpg

 

For multiple sections of this type, you can duplicate the sections to avoid re-adding the icon, text, etc.  

Once you have finished working on your accordion section, click 'publish' to view your changes. 

 

 

Comments

Powered by Zendesk