Topic: TUTOR FOR USING THE EXPANDABLE BARS
TUTOR FOR USING THE EXPANDABLE BARS
If you like to see it in action here is a test link:
http://www.filipina-lady.net/tutor.html
FIRST THE COMPLETE CODE
I will show you the entire code than break it down.
<style type="text/css">
<!--
a.bank:link {color: red;
text-decoration: none; font-size:12px;}
a.bank:visited { color: red;
text-decoration: none; font-size:12px; }
a.bank:hover { color: blue;
text-decoration: none; font-size:12px;}
h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background-image: url(http://www.filipina-lady.net/templates/pink2/media/h2_trigger_a.gif);
background-repeat: no-repeat;
height: 32px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px; /*--Padding of Container--*/
background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}
-->
</style>
<h2 class="trigger" style="padding-top: 14px;"><a href="#"><font size="3">Click here for Content One</font></a></h2>
<div class="toggle_container">
<div class="block">
<h3>Content One</h3><br>
<font size="5">Here I would put my content. It could be a video, words, images, whatever I want. </font>
</div>
</div>
<h2 class="trigger" style="padding-top: 14px;"><a href="#"><font size="3">Click here for Content Two</font></a></h2>
<div class="toggle_container">
<div class="block">
<h3>Content Two</h3><br>
<font size="3">Here I would put my content. It could be a video, words, images, whatever I want. </font><br>
<br>
<object width="325" height="213"><param name="movie" value="http://www.youtube.com/v/3FEYg3rxyqE?fs=1&hl=en_US&rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/3FEYg3rxyqE?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="325" height="213"></object>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
</script>
BREAKING DOWN THE ON PAGE CSS CODE
<style type="text/css">
<!--
a.bank:link {color: red;
text-decoration: none; font-size:12px;}
a.bank:visited { color: red;
text-decoration: none; font-size:12px; }
a.bank:hover { color: blue;
text-decoration: none; font-size:12px;}The above code is the start of on page css. Next I have the coding for the links. It is important that you give your links a class name. In my case I called them bank (no reason I just picked that name). If you do not give your links a class than you will effect all links on that page, including any links you may have on a side bar.
When you use a class to code your links, the link needs to be displayed with the class name like this:
Visit my site at: <a class="bank" href="http://www.filipiniaeyes.com/online-dating-gallery/" target="_blank">Filipina Eyes</a>
h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background-image: url(http://www.filipina-lady.net/templates/pink2/media/h2_trigger_a.gif);
background-repeat: no-repeat;
height: 32px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}In the above coding there is a background image to display the bar. You can download it form my site if you want it.
http://www.filipina-lady.net/templates/ … gger_a.gif
The height coding (height: 32px;) may need adjusted depending on the coding you place in the body. I will explain more later.
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px; /*--Padding of Container--*/
background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}
-->
</style>The above coding is the rest of the coding you need for the expandable bar. You can pretty much use the default coding without any changes.
BREAKING DOWN THE CODE FOR THE BODY
<h2 class="trigger" style="padding-top:14px;"><a href="#"><font size="3">Click here for Content One</font></a></h2>
<div class="toggle_container">
<div class="block">
<h3>Content One</h3><br>
<font size="5">Here I would put my content. It could be a video, words, images, whatever I want. </font><br>
<br>
Visit my site at: <a class="bank" href="http://www.filipiniaeyes.com/online-dating-gallery/" target="_blank">Filipina Eyes</a>
</div>
</div>The above code will display the expandable bar in the body of the page. You should change the content where needed. For example Change <font size="3">Click here for Content One</font> and <h3>Content One</h3> to what you want.
You can format and add content as I did above after the h3>Content One</h3> and before the first </div>
If I want to add a second bar just copy the above code and add it below the last </div>. Change and add the content you want for the 2nd bar. Add a 3rd, 4th, etc, bar, just copy and add below the last closing </div>
Remember above when I said you may have to adjust the height code depending on the coding in the body. Let me explain.
The inline css looks like this:
<h2 class="trigger" style="padding-top:14px;">
In the body code above I used inline css for the h2 tag to move the title on the bar down. By default the ON PAGE CSS put the title at the top. The ON PAGE CSS for the height by default was 46px. Since I adjusted the title with inline css by 14px, I had to change the ON PAGE CSS to 32px (46-14=32). You can make adjustments as you see fit. Just make sure you do the math when done.
JQUERY
You already have jquery in your header so all you need to do is add the appropriate jquery code to make the bar expand or close.
<script type='text/javascript'>
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
</script>
ADVANCED USERS
If you want to use the expandable bar in a straight forward custom page, than the above is all you need to know. This is not a lesson on the many ways you can use Custom Pages in vldP (there are plenty of lessons on the forum already talking about how to create custom pages), but for the more advanced users I will provide the following information.
1. You can create a custom template for your custom page. In the custom template you can include any of the coding for the body and the jquery code (I put the jquery code right before the <!-- INCLUDE footer.tpl -->)
2. You CAN NOT put the ON PAGE CSS coding in the custom template. You still need to put the ON PAGE CSS in the custom page using the HTML editor. If you put ON PAGE CSS coding in a custom template it will cause a problem with the template format that uses the external CSS sheet.
3. However, you can use inline css coding for the custom page or template.
The above was how I created the following custom page on my site at:
http://www.filipina-lady.net/lovebeingsingle.html
Last edited by db3204 (2011-04-11 20:43:59)
