How do you make a collapsible div with "more" "less" that toggle

Hi,

I am looking for a way to loop through a recordset and if It has more than one record append a  "more" "less" with a collapsible div that holds the extra info.

I can "hard code" it but I need a way to have it be dynamic... I'm guess its using the .next method.

Thanks!
smfmetro10Asked:
Who is Participating?
 
GaryCommented:
Something like this
http://jsfiddle.net/GaryC123/Ua9q9/1/

<div class="parent more">Header
    <div>sub text</div>
</div>

Open in new window

.parent div {
    display:none
}
.showmore:after {
    content:"+"
}
.showless:after {
    content:"-"
}

Open in new window

$(".more").each(function(){
    $(this).addClass("showmore")
})
$(".more").click(function(){
    if($(this).hasClass("showless")){
        $(this).removeClass("showless").addClass("showmore")}
    else{
        $(this).addClass("showless").removeClass("showmore")
    }
  $("div",this).slideToggle()
})

Open in new window

0
 
smfmetro10Author Commented:
Yep! Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.