Link to home
Start Free TrialLog in
Avatar of Ted Penner
Ted PennerFlag for United States of America

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
Avatar of zephyr_hex (Megan)
zephyr_hex (Megan)
Flag of United States of America image

Do you mean something like this?

Fiddle Demo

HTML
<div class="container">
  <h2>Simple Collapsible</h2>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">url.com</button>
  <div id="demo1" class="collapse">
    <ul>
      <li>url.com/page1</li>
      <li>url.com/page2</li>
      <li>url.com/page3</li>
    </ul>
  </div>
</div>
<div class="container">
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2">url.com</button>
  <div id="demo2" class="collapse">
    <ul>
      <li>url2.com/page1</li>
      <li>url2.com/page2</li>
      <li>url2.com/page3</li>
    </ul>
  </div>
</div>

Open in new window


CSS
.container {
  margin-bottom: 5px;
}

Open in new window

Avatar of Ted Penner

ASKER

Almost home  
User generated image
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?
True URLs is correct.
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

<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>

Open in new window


Button hover:
User generated image
Link hover:
User generated image
Oh yeah.  Will Implement and close tomorrow. Thank you very much for that suggestion
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.
ASKER CERTIFIED SOLUTION
Avatar of zephyr_hex (Megan)
zephyr_hex (Megan)
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
My developer seems to be getting there slowly http://crispdemo.tedpenner.com/links