Highlighted

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

Explorer ,
May 20, 2018

Copy link to clipboard

Copied

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:Sommario.jpg

TOPICS
Create menus in Dreamweaver

Views

575

Likes

Translate

Translate

Report

Report
This conversation has been locked.

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

Explorer ,
May 20, 2018

Copy link to clipboard

Copied

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:Sommario.jpg

TOPICS
Create menus in Dreamweaver

Views

576

Likes

Translate

Translate

Report

Report
May 20, 2018 0
Enthusiast ,
May 20, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
May 20, 2018 0
Explorer ,
May 20, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
May 20, 2018 0
Adobe Community Professional ,
May 20, 2018

Copy link to clipboard

Copied

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

Tryit Editor v3.5

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
May 20, 2018 0
Explorer ,
May 20, 2018

Copy link to clipboard

Copied

Thank you for replay.

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

Likes

Translate

Translate

Report

Report
May 20, 2018 0
Adobe Community Professional ,
May 20, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
May 20, 2018 0
LEGEND ,
May 20, 2018

Copy link to clipboard

Copied

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>

<html lang=“en”>

<head>

<meta charset="UTF-8">

<title>Accordion Toggle</title>

<style>

.subtitles {

display: none;

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

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

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

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

});

});

</script>

</head>

<body>

<ul>

<!-- chapter 1 -->

<li class="chapter">Chapter 1

<ul class="subtitles">

<li>Subtitle 1</li>

<li>Subtitle 2</li>

</ul>

</li>

<!-- chapter 2 -->

<li class="chapter">Chapter 2

<ul class="subtitles">

<li>Subtitle 1</li>

<li>Subtitle 2</li>

</ul>

</li>

</ul>

</body>

</html>

Likes

Translate

Translate

Report

Report
May 20, 2018 0
Adobe Community Professional ,
May 20, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
May 20, 2018 0