Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.
Smarty Accordion Menu

 
Post new topic   Reply to topic    Smarty Forum Index -> Help Wanted (commercial)
View previous topic :: View next topic  
Author Message
webdew
Smarty n00b


Joined: 31 May 2011
Posts: 3

PostPosted: Tue May 31, 2011 7:49 pm    Post subject: Smarty Accordion Menu Reply with quote

Need Smarty Accordion Menu build
Back to top
View user's profile Send private message
webdew
Smarty n00b


Joined: 31 May 2011
Posts: 3

PostPosted: Tue May 31, 2011 7:50 pm    Post subject: Reply with quote

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
View user's profile Send private message
webdew
Smarty n00b


Joined: 31 May 2011
Posts: 3

PostPosted: Tue May 31, 2011 8:04 pm    Post subject: Quote Reply with quote

Please send me a Quote I can pay via Paypal
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> Help Wanted (commercial) All times are GMT
Page 1 of 1

 
Jump to:  
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
Protected by Anti-Spam ACP