I would put the code at the bottom of the page, just before the closing body tag:
... <script type="text/javascript"> // Javascript goes here </script> </body> </html> You will need to add an ID to the button in order to target it with the javascript. On Saturday, March 24, 2012 3:45:30 AM UTC-7, iange87 wrote: > > Actually, I didn't make it a plus sign, I did, however, change the > design from the default, just to be clear! > > iange87 > > On Mar 24, 10:34 am, iange87 <[email protected]> wrote: > > Hi John > > > > What I mean is this: > > > > I'm using the responsive version of bootstrap, so on smaller screens, > > the top nav becomes a collapsible menu. What I would like to do is > > make it so when collapsed, the toggle button displays a "+" sign, and > > when expanded, it shows a "-" sign. Basically, the same as the OP, but > > applied to the top navigation, rather than a part of the page content. > > > > By default, the button was 3 horiz lines, but I figured out how to > > make that a "+" sign. Looking at the js you posted above, I think > > that's what I'd need to add to my code too, I was just asking for > > clarification on where in the js I would need to add that, and if I > > needed to make any changes to the toggle button so the js could change > > its attibutes. > > > > Sure, the page I'm working on can be seen > atwww.applecounty.co.uk/test/html5/ > > (currently only the 'about' and 'artist' page have been implimented, > > and the toggle button will only appear at smaller screen widths). > > > > Cheers > > > > iange87 > > On Mar 20, 10:32 pm, John Roberts <[email protected]> wrote: > > > > > > > > > Hey iange87, > > > > > I'm not sure I understand what you're wanting to do? Do you have an > > > example we can take a look at, it might make more sense in the context > of > > > some live HTML... > > > > > On Tuesday, March 20, 2012 3:17:15 PM UTC-7, iange87 wrote: > > > > > > I'd really like to do this for my top nav. Where in the js would I > > > > have to add this? Also, what do you mean by "#the-icon-element", > would > > > > I need to do something like <span class="icon-plus" > > > > name="togglebutton"></span> or something and change #the-ic...to > > > > #togglebutton? (sorry, I'm a complete js noob!) > > > > > > Cheers > > > > > > iange87 > > > > > > On Mar 14, 10:44 pm, John Roberts <[email protected]> wrote: > > > > > You can use the collapse events in order to switch out the icon > > > > attribute. > > > > > Something like: > > > > > > > $('#accordion').on('show', function() { > > > > > > > $('#the-icon-element').removeClass('icon-plus').addClass('icon-minus');}); > > > > > > > // Reverse it for hide: > > > > > $('#accordion').on('hide', function() { > > > > > > > $('#the-icon-element').removeClass('icon-minus').addClass('icon-plus'); > > > > > > > }); > > > > > > > The events are all listed in the docs in this section, I always > have to > > > > > search: > http://twitter.github.com/bootstrap/javascript.html#collapse > > > > > > > On Wednesday, March 14, 2012 12:47:15 PM UTC-7, Mike King wrote: > > > > > > > > I am using the collapse javascript to expand and collapse > details in a > > > > > > table. Is there a way to change the icon from a plus sign to a > minus > > > > sign > > > > > > when the information is expanded? (See screenshot) > > > > > > > > The page is live at pullmanapartments.com > > > On Tuesday, March 20, 2012 3:17:15 PM UTC-7, iange87 wrote: > > > > > > I'd really like to do this for my top nav. Where in the js would I > > > > have to add this? Also, what do you mean by "#the-icon-element", > would > > > > I need to do something like <span class="icon-plus" > > > > name="togglebutton"></span> or something and change #the-ic...to > > > > #togglebutton? (sorry, I'm a complete js noob!) > > > > > > Cheers > > > > > > iange87 > > > > > > On Mar 14, 10:44 pm, John Roberts <[email protected]> wrote: > > > > > You can use the collapse events in order to switch out the icon > > > > attribute. > > > > > Something like: > > > > > > > $('#accordion').on('show', function() { > > > > > > > $('#the-icon-element').removeClass('icon-plus').addClass('icon-minus');}); > > > > > > > // Reverse it for hide: > > > > > $('#accordion').on('hide', function() { > > > > > > > $('#the-icon-element').removeClass('icon-minus').addClass('icon-plus'); > > > > > > > }); > > > > > > > The events are all listed in the docs in this section, I always > have to > > > > > search: > http://twitter.github.com/bootstrap/javascript.html#collapse > > > > > > > On Wednesday, March 14, 2012 12:47:15 PM UTC-7, Mike King wrote: > > > > > > > > I am using the collapse javascript to expand and collapse > details in a > > > > > > table. Is there a way to change the icon from a plus sign to a > minus > > > > sign > > > > > > when the information is expanded? (See screenshot) > > > > > > > > The page is live at pullmanapartments.com- Hide quoted text - > > > > > - Show quoted text -- Hide quoted text - > > > > - Show quoted text -
