Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Vertical Accordion

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

A simplified accordion that opens and closes to minimize space
Add a few colors to give it your own look and drag the HTML object to the width you want

ACCORDION
You can actually do a lot more with this but I simplified it from my earlier version
The content is html so you can put what you like in there or keep it easy and just type in your text
With CSS you could use a glossy bar image instead of a background color for the accordion button for example

The example

How the accordion works

• Only one heading opens at a time so it uses minimum space.
• You can also open and close a heading by clicking on it twice.

The accordion content

• The content text uses an HTML paragraph
• Beginners can just type in the text they want
• Designers can use it for more depending on your basic knowledge of html

Attaching and linking to an image

• The CSS category add images for css section has the options to "attach" images to link to.
• Another option is to float your image inside the paragraph in the paragraph & text section
• If the image is attached to "website propeties" use this link: <img src="yourimagesname.jpg">

The accordion width and height

• You just drag the HTML object to any width you want
• It will automatically adjust for the height.

Add a style to the HEAD

On the HTML tab in Insert Page HTML Copy/Paste this code inside HEAD

Use hex or html color names.

silver is the color of the heading background button
#000000 is the color of the heading text (hex for black)
whitesmoke is the color of the heading text when hovered
dimgray is the color of the heading background button when hovered
black is the color of the content text
gainsboro is the color of the content background

<style type="text/css">
.accordion div{width: 100%; border-top: 1px solid black; border-radius:4px;}
.accordionButton {width:100%; height:24px;cursor: pointer;
background: silver;}
.accordionButton h3{padding:0; margin:0; text-align:center; font:16px/24px arial,sans-serif;
color: #000000;}
.over h3{
color: whitesmoke;}
.over {
background: dimgray;}
.accordionContent {display: none; width:100%; }
.accordionContent p {padding:10px; margin:0; text-align:left; font:14px verdana,sans-serif; border-radius:4px;
color:black;
background: gainsboro;}
</style>

Place the code to make it work on your page

Press "OK"
to save

DOUBLE CLICK
on the HTML Object
and paste the code below

That puts the HTML
container on the page

On the Html tab
in Add HTML
select
HTML Object

Copy / Paste this in the HTML Object:
Click to select all then right click to copy

In the HTML object you copy a section and
paste it back in above the last </div> tag like below
You can do that for as many as you need

Adding another accordion section

<div class="accordion">

<div class="accordionButton"><h3>
Heading #1
</h3></div>
<div class="accordionContent"><p>
You type your accordion content in here for #1
</p></div>

<div class="accordionButton"><h3>
Heading #2
</h3></div>
<div class="accordionContent"><p>
You type your accordion content in here for #2
</p></div>

<div class="accordionButton"><h3>
Heading #3
</h3></div>
<div class="accordionContent"><p>
You type your accordion content in here for #3
</p></div>

<div class="accordionButton"><h3>
Heading #4
</h3></div>
<div class="accordionContent"><p>
You type your accordion content in here for #4
</p></div>

</div>



<!-- *** No changes needed in the WSnext Accordion Script below *** -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script language="javascript" type="text/javascript">
$(function() {
$('.accordionButton').click(function() {
$('.accordionContent').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).next().slideDown('normal');
}
});
$('.accordionButton').mouseover(function() {
$(this).addClass('over');
}).mouseout(function() {
$(this).removeClass('over');
});
$('.accordionContent').hide();
});
</script>

<div class="accordionButton"><h3>
Heading #4
</h3></div>
<div class="accordionContent"><p>
You type your accordion content in here for #4
</p></div>

<div class="accordionButton"><h3>
Heading #5
</h3></div>
<div class="accordionContent"><p>
You type your accordion content in here for #5
</p></div>

</div>

Preview to see the accordion in web studio

Thank-you

Text effects in Web Studio 5 - Vertical accordion - by Web Studio Next

aaaaaaaaaaaaiii