How to change the bootstrap caret pointing position?

Question

Within bootstrap the caret is always pointing down. I would like it to point to the right when when the menu is closed. See demo.

Demo: http://jsfiddle.net/Maty2/

<

Answer 1

Simple:

<span class="dropup">
    <span class="caret"></span>
</span>

Answer 2

1. If your element starts out collapsed, make sure to add the class explicitly

   <a class="btn dropdown-toggle fleft collapsed" data-toggle="collapse" data-target="#demo-1" href="#"><span class="caret"></span></a>
   

2. Use this CSS

   // open state - points up
   .functionbox .caret {
     border-top-width: 0;
     border-bottom-width: 5px;
     border-bottom-style: solid;
   }
   
   // collapsed state - points down
   .functionbox .collapsed .caret {
     border-top-width: 5px;
     border-bottom-width: 0;
   }
   

Answer 3

After some discussion with a friend, we came up with adding this class:

.btn.collapsed > .caret {border-left: 4px solid #888; border-right: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}

Though we weren't able so solve the # from being added to the end of the URL. If anyone knows of a suggestion, that would be great.