[Locked] How I can create table of contents, which has an arrow next to a chapter to see or hide subtitles.

Report · May 20, 2018

I have a summary with chapters and these also have subtitles. If I see the summary in a browser the first time, I only see the chapters with the arrow next to it and not all the subtitles listed. How can I do it, that it looks like in the photo:

Report · May 20, 2018

If I am understanding your question correctly, it seems that what you want to do is code a series of nested unordered lists that show or hide options along the lines of a vertically ordered menu. If you're not comfortable coding these lists, you might look into an extension, perhaps one of three from Project Seven: Tree Magic Menu 3, Accordion Panel Magic, or even the Show More or Less for Dreamweaver.

Chris

Report · May 20, 2018

Thank you for answerd.

Yes, you understand correctly. Till now I have "only" this:

<ul><li>chapter 1</li>

<ul><li class="indented">subtitle 1</li>

<li class="indented">subtitle 2</li></ul>

</ul>

If I show it in a browser I can see the subtitle too, but this I don't like. The subtitle must be hide. How I can do this?

Report · May 20, 2018

What you want can be achieved with Bootstrap and the Collapse utility class.

Tryit Editor v3.5

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 20, 2018

Thank you for replay.

I know in CSS I can collapse the border of a table for example. But what is Bootstrap?

Report · May 20, 2018

Bootstrap is a popular open source framework for creating layouts that work on ALL devices. It's much more than just a layout system, though. It comes with many built-in classes for adding interactive elements including forms, modal windows, carousel sliders, collapsible panels +++ more. Best of all, Bootstrrap is integrated into DW CC so there's nothing to download or install.

You can read about Bootstrap below.

Bootstrap 4 Tutorial

Design responsive websites using Bootstrap in Dreamweaver

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 20, 2018

You dont need Bootstrap IF you are not using it, that's just overkill to do something as simple as you required. See example code below using a bit of simple jQuery.

<!DOCTYPE html>

<head>

<title>Accordion Toggle</title>

<style>

.subtitles {

display: none;

}

</style>

crossorigin="anonymous"></script>

$(document).ready(function(){

$('.chapter').css('cursor' , 'pointer').click(function(){

$('.subtitles').slideUp();

$(this).find('ul').slideToggle();

});

</script>

</head>

<body>

<ul>

<li class="chapter">Chapter 1

<li>Subtitle 1</li>

<li>Subtitle 2</li>

</ul>

</li>

<li class="chapter">Chapter 2

<li>Subtitle 1</li>

<li>Subtitle 2</li>

</ul>

</li>

</ul>

</body>

</html>

Report · May 20, 2018

It seems you have an identical question posted in the InDesign EPUB forum. To avoid further confusion, I'm locking this thread because you're doing ePub and not web sites. Going forward, please refer to the following thread.

InDesign or with html how can I create a table of contents, which has an arrow to see all the subtit...

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

[Locked] How I can create table of contents, which has an arrow next to a chapter to see or hide subtitles.