Difference between revisions of "MobileApps-What does the coloring mean on the list of event?"
Jump to navigation
Jump to search
(Created page with "<div xmlns="http://www.w3.org/1999/xhtml"> <div style="text-align: left;">Table of Contents | MobileApps-Staff_App_Event_Features_FAQs|Prev...") |
|||
| Line 1: | Line 1: | ||
| − | + | $(".header").click(function () { | |
| − | + | ||
| − | + | $header = $(this); | |
| − | + | //getting the next element | |
| − | + | $content = $header.next(); | |
| − | + | //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. | |
| − | + | $content.slideToggle(500, function () { | |
| − | + | //execute this after slideToggle is done | |
| − | + | //change text of header based on visibility of content div | |
| − | + | $header.text(function () { | |
| − | + | //change text based on condition | |
| − | + | return $content.is(":visible") ? "Collapse" : "Expand"; | |
| − | + | }); | |
| − | + | }); | |
| − | + | ||
| − | + | }); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <div class="container"> | |
| − | + | <div class="header"><span>Expand</span> | |
| − | + | ||
| − | + | </div> | |
| + | <div class="content"> | ||
| + | <ul> | ||
| + | <li>This is just some random content.</li> | ||
| + | <li>This is just some random content.</li> | ||
| + | <li>This is just some random content.</li> | ||
| + | <li>This is just some random content.</li> | ||
| + | </ul> | ||
| + | </div> | ||
</div> | </div> | ||
Revision as of 15:13, 19 December 2015
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Expand
- This is just some random content.
- This is just some random content.
- This is just some random content.
- This is just some random content.
