Premium Templates
Image Galleries
Image Effects
Video Players
Audio Player
Other Effects
Copyright © Flying Cow Labs All Rights Reserved.
Website crafted using the Serif Software Suite
If you’ve found these tutorials useful please help the world's poorest communities
by making a small donation to WaterAid -
Accordion Tutorial
An intuitive Accordion for use in your Serif Webplus website. It can contain large amounts of information in a small space.
I found this to be a good one to use with WebPlus as it closes the open tab when clicking on a new one. WebPlus is WYSIWYG so doesn't allow for fluid page layout i.e. It won’t extend the page length when multiple tabs are open.
The coding comes courtesy of the people at FlowPlayer.com the tutorial for this accordion can be found here
1. Download the zipped file -
2. Using an ftp program such as filezilla add the complete ‘accordion’ file to the root of your server, this contains everything needed for the accordion to work.
3. Paste in the following code to the head section of the Master page or site page.
Copy and paste > Insert > Web Object > HTML > Paste to Head.
4. Press ‘Alt’ and ‘S’ to bring up your sites HTML, scroll down to the bottom then paste the following code before the closing tag of your body (</body>)
5. Your webpage and server are all set up. Now all is needed is to include the HTML that includes all the information you wish to have in your accordion.
Below is the HTML for the accordion viewable on the demo page. Take a look at the code to see how it’s all put together.
Copy and paste > Insert > Web Object > HTML > Paste to Body.
Placement of the accordion will depend on the placement of the HTML Code fragment.
First pane
... pane content ...
Second pane
... pane content ...
Third pane
... pane content ...
6. Upload your web page/site to your server and you should have a fully functioning accordion, if not run through the tutorial again to make sure you’ve not missed anything out.
Modifying the look of the Accordion
Colour scheme
To get the accordion to tie in with the look and feel of your own website is relatively easy. You will need to make changes to the code in the ‘accordion.css’ file.
To open the file you can either use Notepad or use something like PSPad -
Once open you will see there are many hex colour values (example: #ffffff) set for different sections of the accordion. Changing these and uploading the file back to your server will result in the accordions colours changing. You may find you need to play around to give it the right look.
Size
Changing the width of the accordion is again accomplished with the ‘accordion.css’ file.
Open the file, on the 4th line it reads width: 300pix simply change this figure to the size in pixels you’d like your accordion.
Enjoy!