On 8/17/12 6:25 PM, Kyle Sessions wrote:
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;}
[...]
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. ...
Yes. Very odd. Same in Safari 6 (Mac).
Anyway, simplifying the CSS a bit, this seems to work as you wish:
.switch>.more {display:inline;}
.switch>.fewer {display:none;}
.in+.switch>.more {display:none;}
.in+.switch>.fewer {display:inline;}
--
Cordially,
David
______________________________________________________________________
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/
