Styling TOC with CSS

npowell9105 Community Member Posts: 12
Hi all,

I'm wondering if anyone else has come across this problem.

I have inserted a TOC into my title and don't want the border as it kills my design. However, using a Frameless TOC has the items running off a background box the TOC is sitting on. (hope that makes sense!).

So, I have added some custom javascript to run at the bottom of the page...

var c = document.getElementById("toc18809").childNodes;

c[0].style.border ="0";


The "button15675" is the Table of Contents button used to move the TOC from offscreen to onscreen.

The toc18809 is the ID for the Div that contains the iFrame for the TOC. The childNodes looks in the div to see what's there. c[0] is the first node which happens to be the iFrame. Obviously the rest is to turn the default border off.

Now to my problem...

When I click the Preview in a browser, this all works just fine. See previewInBrowser.jpg - no border.

When I export the package to HTML, the code no longer works. See exportToHTML.jpg - bevelled border! I've been pulling my hair out for 2 days trying different things but I'm now at a loss...


Can anyone help?!





  • npowell9105
    npowell9105 Community Member Posts: 12
    OK, so it turns out, that IE run locally ignores the javascript to remove the iframe border! I uploaded the template to an LMS and low and behold, it worked!! lol

    On the bright side, the above code may be helpful to someone looking to style their TOC... :)


  • cwhelan2537
    cwhelan2537 Community Member Posts: 12
    Thank you very much for sharing the result. I was looking to do my TOC on the last course to do the same thing, but could not find anything specific to what I was trying to do. This solves the problem for next time I want to do this.



Leave a Comment

Rich Text Editor. To edit a paragraph's style, hit tab to get to the paragraph menu. From there you will be able to pick one style. Nothing defaults to paragraph. An inline formatting menu will show up when you select text. Hit tab to get into that menu. Some elements, such as rich link embeds, images, loading indicators, and error messages may get inserted into the editor. You may navigate to these using the arrow keys inside of the editor and delete them with the delete or backspace key.