Ted Penner
asked on
Collapseable list of URLs.
Is it possible to modify the example shown here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible&stacked=h to create the following structure for a list of bookmarks?
URLs (below) | BRIEF DESCRIPTION OF EACH URL/DOMAIN
| AND BRIEF DESCRIPTION OF EACH URL/PAGE
+/-url.com
url.com/page1
url.com/page2
url.com/page3
+/-url2.com
url2.com/page1
url2.com/page2
url2.com/page3
URLs (below) | BRIEF DESCRIPTION OF EACH URL/DOMAIN
| AND BRIEF DESCRIPTION OF EACH URL/PAGE
+/-url.com
url.com/page1
url.com/page2
url.com/page3
+/-url2.com
url2.com/page1
url2.com/page2
url2.com/page3
What do you mean by "clickable with description" ? The buttons are clickable. I'm assuming you want something else to happen when a button is clicked, in addition to showing the children urls? Where should the description show up? Next to the button? As a modal pop-up? Or?
Also, I'm assuming the urls will in fact be true urls, that when clicked, take you somewhere? Or are these not true urls, and a description should show when clicked instead of taking you somewhere? Where should the description show up? Next to the button? As a modal pop-up? Or?
Also, I'm assuming the urls will in fact be true urls, that when clicked, take you somewhere? Or are these not true urls, and a description should show when clicked instead of taking you somewhere? Where should the description show up? Next to the button? As a modal pop-up? Or?
ASKER
True URLs is correct.
Description perhaps should appear on hover or be subscript underneath.
Description perhaps should appear on hover or be subscript underneath.
You can add a description on hover using the title attribute, like so:
Fiddle Demo
HTML
Button hover:
Link hover:
Fiddle Demo
HTML
<div class="container">
<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1" title="button description 1">url.com</button>
<div id="demo1" class="collapse">
<ul>
<li><a href="url.com/page1" title="description 1">url.com/page1</a></li>
<li><a href="url.com/page2" title="description 2">url.com/page2</a></li>
<li><a href="url.com/page3" title="description 3">url.com/page3</a></li>
</ul>
</div>
</div>
<div class="container">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2" title="button description 2">url2.com</button>
<div id="demo2" class="collapse">
<ul>
<li><a href="url2.com/page1" title="description 1">url2.com/page1</a></li>
<li><a href="url2.com/page2" title="description 2">url2.com/page2</a></li>
<li><a href="url2.com/page3" title="description 3">url2.com/page3</a></li>
</ul>
</div>
</div>
Button hover:
Link hover:
ASKER
Oh yeah. Will Implement and close tomorrow. Thank you very much for that suggestion
ASKER
OK so I am doing some testing on this and it appears that it has to be done with jquery as opposed bootstrap due to old browsers and some related compatibility issues.
I first tried it here without the CSS but you can see the result.
http://tedpenner.com/links/
Please advise further on what needs to happen to resolve it.
I first tried it here without the CSS but you can see the result.
http://tedpenner.com/links/
Please advise further on what needs to happen to resolve it.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
My developer seems to be getting there slowly http://crispdemo.tedpenner.com/links
Fiddle Demo
HTML
Open in new window
CSS
Open in new window