Gamyaliekly
New Member
I have a list with detail sections that open up when a link is clicked. It works fine in most cases, but in some edge cases it does not.I've included comments in the code to explain exactly what the problem is.Ideally I want to solve this with CSS, but I am already using javascript & jQuery on the page so a solution using those is ok if it can't be done.Here is a fiddle.Alternatively here is the html:\[code\]Example 1. This is how it should look.<ul> <li class='open'> <div class='title'> <a class='link'>details</a> item 1 </div> <div class='details'> These details open when the details link is clicked </div> </li> <li> <div class='title'> <a class='link'>details</a> item 2 </div> <div class='details'> this is hidden </div> </li> <li> <div class='title'> <a class='link'>details</a> item 3 </div> <div class='details'> this is hidden </div> </li> </ul>Example 2. If the name is too long it should push the width of the whole list wider and not break to the next line, with the background expanding under it. Instead it is covering the details link and not expanding the background. The details links from the other items should also move to the right so that they remain in line.<ul> <li class='open'> <div class='title'> <a class='link'>details</a> item 1 with a very very very long name </div> <div class='details'> These details open when the details link is clicked </div> </li> <li> <div class='title'> <a class='link'>details</a> item 2 </div> <div class='details'> this is hidden </div> </li></ul>Example 3. The details section can sometimes contain a long url that shold also not break. The background should expand to cover the url, with the details links moving to right to line up with the end of the url.<ul> <li class='open'> <div class='title'> <a class='link'>details</a> item 1 </div> <div class='details'> <div class='url'> all this should be on one line: www.a-long-url </div> </div> </li> <li> <div class='title'> <a class='link'>details</a> item 2 </div> <div class='details'> this is hidden </div> </li></ul>\[/code\]and css:\[code\].details { display: none;}.open .details { display: block;}.link { text-decoration: underline; float: right;}.title { font-weight: bold; white-space:nowrap;}.url { white-space:nowrap;}ul { list-style-type: none; width: 15em;}li.open { background-color: #c8d8ff; border-radius: 2em;}li>div { padding: 1em; }\[/code\]