[HOW TO - vB4] Making Boxes Collapsible

[cellarius]

Originally Posted by SledgeHead

Awesome! How would I go about adding a border and changing the background color? Also, I noticed the collapse button isn't centered vertically, but instead it touches the bottom. How do I adjust this?

Coloring or bordering the box has nothing to do with this article's topic - you do it using .css, just as you would do for any other box. Go grab some basic .css tutorial on how to do this, explaining this here would lead too far, really.
To change positioning, you need to add an additional class as described in the postings right before yours to override the settings in collapse class.

[winstone]

Originally Posted by TheWindows7Site

Do I have to use "class="collapse"" in my collapse/expand link?

Because when I do, it puts the link at the very top right of the post's and no matter where I move the link code in the template, it will always place it at the top right (near the inline moderation radio button area).

apart from adding additional class overriding the existing properties, you can also add the CSS property of "position:relative;" to the container block so the "top:10px" will apply only to the container and not the whole page

Thanks for the article.

[TimberFloorAu]

So tell me what is wrong with my code ?

<!--yobro modified collapse bookmarks code-->
<div class="options_block_container">
<vb:if condition="$bookmarksites">
<div class="options_block">
<div class="collapse">
<a class="collapse" id="social_bookmarks_list" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_bookmark_site}_40b.png" alt="" /></a>
<h4><span class="optiontitle">{vb:rawphrase bookmarks}</span></h4>
<div id="social_bookmarks_list" class="thread_info_block">
<h5 class="blocksubhead">{vb:rawphrase bookmarks}</h5>

<ul class="icon_list">{vb:raw bookmarksites}</ul>
</div>
</div></div>
</vb:if>
<!--yobro modified collapse bookmarks code-->

[NLP-er]

Example given in article forces the way how it will be displayed. I want to have collapsable blocks but without blockhead and having collapse image in place where I put it. Now it is not possible. Even if I remove classes blockhead and blockrow my collapse image is not in place where I put it but goes to right side and is inside of collapsable block (what also makes me impossible to have it collapsed by default).

So - what changes I need, to have my collapse image in place where it is set? - not moved to other one like it is now.

[cellarius]

You need to find out what css definitions make it go to the right. Use a tool like firebug for that. IIRC it is the collapsible-class that forces it to the right. Since you need that class for the collapse javascript to work, you'll need to override it.

[NLP-er]

Originally Posted by cellarius

You need to find out what css definitions make it go to the right. Use a tool like firebug for that. IIRC it is the collapsible-class that forces it to the right. Since you need that class for the collapse javascript to work, you'll need to override it.

I was trying to override it by adding also style attribute, but I fail there. Maybe I was using wrong CSS - as I remember I was playing with position. It didn't work so I thought that maybe there is also some JS which is changing it dynamically... - do you know something about that? Maybe you know which CSS style to use to force it staying in its place?

[cellarius]

Did you try looking at it using firebug? I can manipulate positioning by modifying a.collapse img, and the javascript does not mess with positioning as far as I can tell.

[voglermc]

I'm trying to collapse my header for smaller monitors and have a cookie set so it remembers the open or closed state like VB does in its collapse buttons. It doesn't seem to work. Can anyone help me get this so it remembers the cookie?

<div id="vb4_container">

    <div id="vb4" style="width:920px"><a id="vb4_link" href="http://www.domain.org/"></a>

        <div id="vb4_content">
        <p>Our club was started as a way for ...</p>
        <ul>        
        <li><a href="http://www.domain.org/register.php">Click Here to learn MORE!</a></li>
        </ul>
        </div>

    </div>

<a id="vb4_close" href="#" onclick="
var v_vob = fetch_object('vb4_container');
if(v_vob)
{
set_cookie('vb4banner_off', v_vob.className ? '' : 1);
v_vob.className = v_vob.className ? '' : 'promo_closed';
}
return false;
"></a>

</div>

CSS CODE

/* vB4 Promo */
#vb4_container {
 background-color:#2d2d2d;
 /*margin: 0 -35px 10px;*/
 margin: 0;
 padding:10px 0 0 0;
 position:relative;
}

#vb4 {
 margin: auto;
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_bg.jpg) no-repeat 0 0;
 height:176px;
 position:relative;
}

.promo_closed #vb4 {
 margin: auto;
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_bg.jpg) no-repeat 0 -78px;
 height:176px;
 position:relative;
}

#vb4_link {
 position:absolute;
 top:0;
 left:0;
 width:580px;
 height:132px;
 outline: none;
}

#vb4_content {
 position:absolute;
 right:0;
 top:0;
 width:324px;
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_title.png) no-repeat -2px 5px;
 min-height: 64px;
}

#vb4_content p {
 font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
 margin-top:46px;
 margin-bottom:26px;
 color:#FFF;
 font-size:11px;
}

#vb4_content ul {
 margin:0px;
 padding:0;
 position:absolute;
 bottom:0;
}

#vb4_content li {
 list-style-type:none;
 display:inline;
 margin-right:10px;
}

#vb4_content li a {
 color:#dd0000;
 font-family:helvetica,sans-serif;
 font-weight:bold;
 font-size:14px;
 text-decoration:none;
 outline: none;
}

#vb4_close {
 position:absolute;
 bottom:0;
 right:0;
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_minimize.png) no-repeat 0 0;
 width: 28px;
 height: 27px;
 outline: none;

}

.promo_closed #vb4_content p {
 display:none;
}

.promo_closed #vb4 {
 height:116px;
}

.promo_closed #vb4_content { 
 top:52px;
 bottom:16px;
}

#vb4_container.promo_closed {
 margin-top: -64px;
}

.promo_closed #vb4_close {
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_maximize.png);
 outline: none;
}

/* End vB4 Promo */

[cellarius]

I would think that your code collides with vB's. If you're setting your own cookie anyway, just don't use vB's collapsing method at all. That'll be probably much easier than getting this to work together.

[voglermc]

I sure could use your help!