Solved

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

Posted on 2013-11-08
2
460 Views
Last Modified: 2013-11-08
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!
0
Comment
Question by:smfmetro10
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39634678
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
 

Author Closing Comment

by:smfmetro10
ID: 39634935
Yep! Thanks!
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question