|
Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon. |
|
View previous topic :: View next topic |
Author |
Message |
webdew Smarty n00b
Joined: 31 May 2011 Posts: 3
|
Posted: Tue May 31, 2011 7:49 pm Post subject: Smarty Accordion Menu |
|
|
Need Smarty Accordion Menu build |
|
Back to top |
|
webdew Smarty n00b
Joined: 31 May 2011 Posts: 3
|
Posted: Tue May 31, 2011 7:50 pm Post subject: |
|
|
Hi Guys,
I thought this would look great in my smarty template home.tpl, trying to follow the guide at:
http://www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery/
Just cant figure out how to include everything to make it work.
What i've got:
In my root folder i got the following file structure:
home.tpl
style.css
/javascript/jquery.min.js (normal jquery javascript)
/javascript/accordion.js
-------------------------------------------------------
Code: | $(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
}); |
Style.css
---------------------------------------
Code: | *, * focus {
outline: none;
margin: 0;
padding: 0;
}
.container {
width: 500px;
margin: 0 auto;
}
h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
.acc_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.acc_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.acc_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
} |
home.tpl
--------------------------------------------------
{literal}
<script type='text/javascript' src='/javascript/jquery-latest.js'></script>
<script type='text/javascript' src='/javascript/accordion.js'></script>
{/literal}
rest of code....
Obviously i'm doing something wrong i need your help...
Really appreciate it. |
|
Back to top |
|
webdew Smarty n00b
Joined: 31 May 2011 Posts: 3
|
Posted: Tue May 31, 2011 8:04 pm Post subject: Quote |
|
|
Please send me a Quote I can pay via Paypal |
|
Back to top |
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
Powered by phpBB © 2001, 2005 phpBB Group
|