Hi Akbar,
You don't need ANY css styles from my demo page, you need ONLY the
script nested_accordion.js.
Place your unordered list wherever you want in your HTML document and
style it to correspond
your page style.
For example, if your page structure is something like this:
<body>
<div id="wrapper">
<div id="container">
...
</div>
<div id="rightcol">
<ul class="accordion">
<li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>...</li>
</ul>
</div> <!-- end #rightcol -->
</div> <!-- end #wrapper -->
</body>
you will call the plugin like this:
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/nested_accordion.js"></
script>
<script type="text/javascript">
$(function() {
$('#rightcol').accordion();
});
</script>
...
</head>
You can style your Right Column and your list <ul class="accordion">
as you want.
The css style in my demo page is just an example style. My page
structure is specific to my page.
The <div id="wrapper">, the <div id="container">, etc. are just
structure elements of my page.
They have nothing to do with the script.
The variable 'containerID' in the script is the ID of the closest
named container of 'a.trigger'.
In the above example containerID = "rightcol".
The 'wrapper' in the script is the element that wraps the pair of
'a.trigger' and 'next collapsible element'.
In the above example wrapper="li'.
Hope this helps.
Regards,
Adriana
On Nov 16, 5:52 pm, Akbar <akbareh...@gmail.com> wrote:
> I am using Firebug.
>
> The code I have in my CSS:
>
> #wrapper {
> margin-left: auto; /*centers the div in Mozilla*/
> margin-right: auto; /*centers the div in Mozilla*/
> width:775px;}
>
> #container{
> width:775px;
> height:auto;
> clear:both;
> margin-left: auto; /*centers the div in Mozilla*/
> margin-right: auto; /*centers the div in Mozilla*/
> text-align: left; /*to counter the text-align center for IE*/
> padding:0px;
> background-image:url(/shared/shared_corepository/media/images/layouts/
> nav-col.gif);
> background-color:#FFFFFF;
>
> }
>
> And the code in the CSS for Nested Accordion is:
>
> #container {
> float:left;
> width:100%;
> margin-right:-19em;
> padding:0 0 1em;
> position:relative;
> min-height:0; /* hasLayout prevents jumping content in IE */
>
> }
>
> It is when I rename the container in the Nested Accordion CSS, that my
> left navigation column disappears.
>
> Sorry, I understand the difficulty of our development instance not
> being open. If you can give me ideas, I will appreciate. If not, I
> will understand.
>
> Akbar
>
> On Nov 16, 11:24 am, "Jonathan Vanherpe (T & T NV)" <jonat...@tnt.be>
> wrote:
>
> > Use FireBug to see which styles apply to what element and where they're
> > defined. If you don't show any code it's hard to help you.
>
> > Jonathan
>
> > Akbar Ehsan wrote:
> > > Unfortunately, I am working in my development area and can not show
> > > you the page. In itself it works fine. But when I try to remove/rename
> > > your container style from the CSS, my CSS navigation container on the
> > > left disappears.
>
> > > Could you, please, explain the purpose "container" and "wrapper"
> > > classes play in your CSS and JS. I think if I am able to understand it
> > > well, I will be able to resolve my issues.
>
> > > Thanks again,
>
> > > Akbar
>
> > > On Mon, Nov 16, 2009 at 11:07 AM, Akbar <akbareh...@gmail.com
> > > <mailto:akbareh...@gmail.com>> wrote:
>
> > > Hi Adriana,
>
> > > I am trying to use your Side Column nested accordion. I am trying to
> > > use it as right hand navigation.
>
> > > I am having all kinds of issues with it. It appears that the CSS for
> > > our WWW site may be conflicting with wrapper, container styles of the
> > > CSS for nested navigation. I tried renaming wrapper, container etc in
> > > your CSS , it did not work.
>
> > > Do you have bare-bones code for your Side Nested Accordion?
>
> > > Thanks,
>
> > > Akbar
>
> > > On Nov 13, 7:08 pm, Adriana <adipa...@yahoo.com
> > > <mailto:adipa...@yahoo.com>> wrote:
> > > > Add this CSS declaration:
>
> > > > .accordion li {list-style-type:none}
>
> > > > On Nov 13, 10:21 pm, Akbar Ehsan <akbareh...@gmail.com
> > > <mailto:akbareh...@gmail.com>> wrote:
>
> > > > > I have it almost working. You are right nothing other than
> > > JQuery and CSS is
> > > > > needed. However, I get the bullet points next to plus and
> > > minuses as well. I
> > > > > am not yet sure why? If you have thoughts about it, please
> > > pass it along.
>
> > > > > Thanks,
>
> > > > > Akbar
>
> > > > > On Fri, Nov 13, 2009 at 3:45 PM, MorningZ <morni...@gmail.com
> > > <mailto:morni...@gmail.com>> wrote:
> > > > > > Nothing jQuery, or anything client side for that matter,
> > > should have
> > > > > > any sort of server-side requirement....
>
> > > > > > any HTML that PHP can generate can be done by Perl, Cold
> > > Fusion, .NET,
> > > > > > etc etc
>
> > > > > > On Nov 13, 2:59 pm, Akbar Ehsan <akbareh...@gmail.com
> > > <mailto:akbareh...@gmail.com>> wrote:
> > > > > > > Hello Adriana,
>
> > > > > > > Thanks,
>
> > > > > > > Does it require PHP? I have no PHP skills.
>
> > > > > > > Regards,
>
> > > > > > > Akbar
>
> > > > > > > On Thu, Nov 12, 2009 at 9:12 PM, Adriana
> > > <adipa...@yahoo.com <mailto:adipa...@yahoo.com>> wrote:
> > > > > > > > Hello Akbar,
>
> > > > > > > > Here are two links that provide examples of nested
> > > accordions:
>
> > >
> > > >http://adipalaz.awardspace.com/experiments/jquery/nested_accordion.html
>
> > >
> > > >http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.
> > > > > > ..
>
> > > > > > > > Regards,
> > > > > > > > Adriana
>
> > --www.tnt.be<http://www.tnt.be/?source=emailsig> *Jonathan
> > Vanherpe*
> > jonat...@tnt.be <mailto:jonat...@tnt.be> -www.tnt.be
> > <http://www.tnt.be/?source=emailsig> - tel.: +32 (0)9 3860441
>
>
