<div>
add a style to the table of contents div/ table<br />
<br />
as &lt;div id=&quot;toc&quot; style=&quot;display:none&quot;&gt;<br />
....<br />
....<br />
...<br />
<br />
&lt;/div&gt;<br />
<br />
Now add a button/small image for table of contents<br />
&lt;img src=&quot;yourimage&quot; onclick=&quot;showToc()&quot;&gt;<br />
<br />
add javascript fn<br />
<br />
function showToc()<br />
{<br />
&nbsp;if(document.getElementById<wbr />('toc').st<wbr />yle.displa<wbr />y=='none')<wbr /><br />
&nbsp; document.getElementById('t<wbr />oc').style<wbr />.display='<wbr />block';<br />
&nbsp;else<br />
&nbsp; document.getElementById('t<wbr />oc').style<wbr />.display='<wbr />none'<br />
}
</div>


add a style to the table of contents div/ table

as <div id="toc" style="display:none">
....
....
...

</div>

Now add a button/small image for table of contents
<img src="yourimage" onclick="showToc()">

add javascript fn

function showToc()
{
 if(document.getElementById('toc').style.display=='none')
  document.getElementById('toc').style.display='block';
 else
  document.getElementById('toc').style.display='none'
}

<div>
So whenever the image is clicked the toc will shown if it is hidden. if the image is clicked again the toc will hide.<br />
<br />

</div>


So whenever the image is clicked the toc will shown if it is hidden. if the image is clicked again the toc will hide.



<div>
<div class="content wysiwyg-content">
I'd like a table of contents and considered using an entire pane on one side, but it took up to much room.<br />
<br />
Any suggestions about how to keep the functionality of a table of contents but have it be an option to the user?<br />
<br />
thanks,<br />
newbieweb
</div>
</div>


I'd like a table of contents and considered using an entire pane on one side, but it took up to much room.

Any suggestions about how to keep the functionality of a table of contents but have it be an option to the user?

thanks,
newbieweb

need an HTML table of contents which can be turned on or off by the user

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.