Simple collapse/expand for any prosilver container

[Jessica]

I just want to add it to any prosilver box (container) created by this code:

Code: Select all

<div class="forumlist">
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
         </ul>
         
         <ul class="topiclist forums">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
       </div>
      
<span class="corners-bottom"><span></span></span></div></div>
</div>
    </div>

don't know if it's possible :/

[martin123456]

I just want to add it to any prosilver box (container) created by this code:

Code: Select all

<div class="forumlist">
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
         </ul>
         
         <ul class="topiclist forums">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
       </div>
      
<span class="corners-bottom"><span></span></span></div></div>
</div>
    </div>

don't know if it's possible :/

To make that code you have work you will need this http://www.christianbullock.com/2011/ph ... th-cookies

As that code come from my site and is in use there as a stats box.

[Jessica]

I told you, I can't use that because the jQuery slide won't work because of jQuery conflicts.

[DionDesigns]

As long as you have already loaded jQuery, the following would work. It's probably best to add cookie support and a custom toggle function with "+" and "-" images, but those are separate issues.

Code: Select all

<div class="forumlist">
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist" style="position:relative">
            <span style="position:absolute;right:5px;bottom:2px" onclick="$(this.parentNode.nextSibling).slideToggle()">Toggle</span>
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
         </ul><ul class="topiclist forums" style="display:block">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
       </div>
      
<span class="corners-bottom"><span></span></span></div></div>
</div>
    </div>

Please note that I removed the whitespace between the </ul> and <ul class="topiclist forums" style="display:block"> tags. This is critical -- the code will not work unless this is done.

[Jessica]

thanks

I tried this and the text (I put in + instead of toggle) appears, but I can't click it...

forum: http://area51.chenschool.elementfx.com/

[DionDesigns]

What is on your test board bears no resemblance to the code I provided above...

Why are you using duplicate .forabg elements for each category? There is absolutely no need for such duplication in a show/hide toggle! The following is a COMPLETE replacement for your current category toggle function, and it includes cookie support:

Code: Select all

<div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist" style="position:relative">
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
            <img src="./styles/prosilver/theme/images/hide.png" style="position:absolute;right:5px;bottom:5px" onclick="toggleCat(this)" />
         </ul><ul id="c{FORUM_ID}" class="topiclist forums" style="display:block">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>

Note that I removed the DIV tag which enclosed the .forabg element, as it's not needed. You also don't need the duplicate "hide" .forabg element any more. You will also need the following javascript:

Code: Select all

<script type="text/javascript">
function toggleCat(button) {
    var cat = button.parentNode.nextSibling;
    if (cat.style.display ==  'none') {
        button.src = "./styles/prosilver/theme/images/hide.png";
        document.cookie = '_' + cat.id  + '=; path=/; expires=Wed, 1 Jan 2020 00:00:00 GMT;';
    }
    else {
        button.src = "./styles/prosilver/theme/images/show.png";
        document.cookie = '_' + cat.id  + '=1; path=/; expires=Wed, 1 Jan 2020 00:00:00 GMT;';
    }
    $(cat).slideToggle('slow');
}

cookies = document.cookie.split('; ');
for (i in cookies) {
    if (cookies[i].charAt(0) == '_') {
        cookie = cookies[i].split('=');
        if (cookie[1] == '1') {
            cid = cookie[0].substring(1);
            if (document.getElementById(cid)) {
                document.getElementById(cid).style.display='none';
            }
        }
    }
}
</script>

It should be placed at the end of forumlist_body.html.

[Jessica]

I'm using a collapse/expand mod for the categories, but what I want is not for the categories. it's for the prosilver blue box I have for the stats box :/

[DionDesigns]

There was an error in the toggleCat() function in the script...I just fixed the error in my post.

It would have helped to know that you only wanted this for the stats. In that case, after replacing the toggleCat() function with the new code, the only other change you need to make is to change id="c{FORUM_ID}" to id="cstats".

[Jessica]

There was an error in the toggleCat() function in the script...I just fixed the error in my post.

It would have helped to know that you only wanted this for the stats. In that case, after replacing the toggleCat() function with the new code, the only other change you need to make is to change id="c{FORUM_ID}" to id="cstats".

okay thanks I'll try the new code

and not just stats, but if I create a box with this:

Code: Select all

<div class="forumlist">
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
         </ul>
         
         <ul class="topiclist forums">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
       </div>
      
<span class="corners-bottom"><span></span></span></div></div>
</div>
    </div>

or any mod that adds a box like that...if that makes any sense :/

I guess that would be too complicated? I think it would be.

[DionDesigns]

The code I provided will work with any box you create using the same structure, as long as the ID of the box being toggled (in the case of the stats box, cstats) is unique.

[Jessica]

ah okay. but how would I know what ID to use?

EDIT: okay I changed it, and it's working now. one little thing though. is there anyway you can make it so that when you hover your cursor over the toggle image, the cursor changes to a hand?

[DionDesigns]

To add the pointer, find the hide/show IMG tag, and change this:

Code: Select all

style="position:absolute;right:5px;bottom:5px"

to this:

Code: Select all

style="cursor:pointer;position:absolute;right:5px;bottom:5px"

[Jessica]

thanks again!


also,

for this:

The code I provided will work with any box you create using the same structure, as long as the ID of the box being toggled (in the case of the stats box, cstats) is unique.

how do I figure out the ID?

[DionDesigns]

You do what I did with the cstats ID...you make it up! Basically, as long as there is no other ID on the page with the same name, it doesn't matter what you call it.

[clight77]

@DionDesigns
I had to post and say thanks for all the info,this in depth solution work great for me.

Thanks...