Hi all,
I was wondering if one of you might have some insight into this problem I'm
experiencing. I'm using the Twitter Bootstrap CSS and Javascript to toggle
a list of items on my website. We display a few items in a list, and then
have a "More" link to display the rest of the items. The showing/hiding of
the rest of the items is controlled via bootstrap-transition.js and
bootstrap-collapse.js. This is all working well enough. The problem is
that, in my markup, I actually have a "More" link _and_ a "Fewer" link. I
want to hide the "Fewer" link when the additional list is closed, and hide
the "More" link when the additional list is open. I'm using the following
CSS to control the showing and hiding of the links (I have a live example
that I'll link to at the end of this, but here's some code if you don't
want to follow the link):
.collapse+.switch>.more {display:inline;}
.collapse+.switch>.fewer {display:none;}
.in.collapse+.switch>.more {display:none;}
.in.collapse+.switch>.fewer {display:inline;}
.collapse is my <ul> with the additional items. .switch is my <div> holding
the two links, More and Fewer. .collapse and .switch are adjacent siblings.
When you click the link to toggle the list, Bootstrap toggles class="in" on
the target element. So, .collapse should always select the <ul> and
.in.collapse should select the <ul> only when it's open.
The actual problem is that, when the list is closed, and I click on "More"
to open it, "More" does not disappear until I mouse over it. This is only a
problem with hiding "More". The "Fewer" link appears as soon as you click
"More". And, oddly enough, this is only a problem when opening the list.
When it's already open, and I click "Fewer" to close it, the "More" link
immediately appears and the "Fewer" link immediately disappears. But when
the list is closed and I go to open it, it's like the browser is not
noticing that it needs to hide the "More" link until I force it to notice
by hovering over the link. (Actually, on closer watching, it looks like the
"More" link does disappear immediately, then once the list expands, it
reappears until you mouse over it.)
I'm experiencing this problem only in Chrome. Firefox and IE both seem
fine. (Actually, in my real-world project, IE9 was showing the same
behavior as Chrome, but in my test-case here, IE's fine; it's only Chrome
that's misbehaving.)
Anyway, as promised, a live example: http://kage23.com/collapse.html
Any insight would be greatly appreciated!
Thanks in advance,
Kyle
--
Kyle G Sessions
Berkeley Electronic Press
ksessi...@bepress.com
510-665-1200 + 128
www.bepress.com
bepress: the frontier of scholarly publishing since 1999
Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
