On page load block is visable for a second then collapses [#1472404]

I noticed there was an issue with this posted a few months back for Version 7. However, i'm now having an issue with this in 6.

Basically, the block is expanded then collapses once page is loaded. Is there a way to force it to be collapsed during page load?

Here is the site: http://www.poweredbyareas.com. Block is located top right.

Any help is much appreciated.

Thank you!

Comments

Comment #1

kalani commented 20 March 2012 at 23:39

Still having the same issue. I've installed Boost and enabled the cache for blocks and css, but still the block shows then collapses once page is completely loaded. Any suggestions?

Comment #2

dabro commented 26 March 2012 at 22:02

Title:

On page load block is visable for a second then collapses

» Change the block content to not display by defaul in css.

Just add this to your stylesheet -

.region-????? .content {
	display: none;
	}

Where region is where your collapsible block is located, I had a special region at the top of the page. Set the block content to not display by default, let the javascript change the display properties of the block on click. It's hard to believe it's this simple but it seems to have worked for me. It may effect other behaviors with this module but solved the flashing problem for my use. YMMV

Comment #3

dabro commented 26 March 2012 at 22:11

Title:

Change the block content to not display by defaul in css.

» On page load block is visable for a second then collapses

Change Title Back

Comment #4

miccelito commented 28 September 2012 at 08:15

@dabro

But that would affect all .content tags within the particular region.

Depending on what content you would have within a collapsiblock (if it's just to display text and not i.e form), maybe you would consider having a combination of click and hover effect - which also would get ride of the annoying "On page load block is visable for a second" by adding this to your themed css for the block (#YOURBLOCK means the id of the block):

#YOURBLOCK.collapsiblock-processed div.content { 
    display:none !important; 
}
#YOURBLOCK.collapsiblock-processed:hover div.content { 
    display:block !important; 
}