Slightly Perturbed
offlineMember
Can some one please give me an example of how to use SML with an unordered list:
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
<li>line 5</li>
<li>line 6</li>
</ul>
I want to hide lines 4-6 and have them show up when the SML link is pressed. Thanks
rodthescot
offlineMember
Hi,
Try the following, wrap your hidden lines in a DIV and apply SML as shown.
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<div id="p7SMLcontent_1" class="sml-content">
<div id="p7SMLwrapper_1">
<li> line 4</li>
<li>line 5</li>
<li>line 6</li>
</div>
<script type="text/javascript">P7_SMLop('p7SML_1',1,600,'Show More...','...Show Less',0,0)</script>
</div>
<a id="p7SML_1" href="#" class="sml-more">Show More...</a>
</ul>
Add this css rule:
#p7SMLcontent_1{
list-style: inside;
}
The downside is that your hidden lines will be indented slightly when shown.
Without the css rule they would be inline but you will lose the bullets.
The same thing can be achieved by selecting the indent option in the SML UI but the indent is much more pronounced.
Rod.
Slightly Perturbed
offlineMember
Thanks very much for the reply, I'd tried the div, lost the bullets and given up on that approach. I think if I wrap the first three lines in their own div I can give them some left padding to make it all look even. Thanks again for leading me to that idea.
Slightly Perturbed
offlineMember
I used a negative margin to make the lines line up but I've found another problem. Some of the lines are long and when they wrap the regular bullet indentation isn't supplied so the bullet effect is lost. Is there a fix for this.
rodthescot
offlineMember
I used a negative margin to make the lines line up but I've found another problem. Some of the lines are long and when they wrap the regular bullet indentation isn't supplied so the bullet effect is lost. Is there a fix for this.
It would really help if you could provide a link to your test page so we can see exactly what you want to achieve.
Rod
You must log in to post.
