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:
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
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?
Copy link to clipboard
Copied
What you want can be achieved with Bootstrap and the Collapse utility class.
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?
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.
Design responsive websites using Bootstrap in Dreamweaver
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>
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.
Nancy