|
|
| Line 6: |
Line 6: |
| | | | |
| | <html> | | <html> |
| − | <head>
| |
| − |
| |
| − | <script> (function($){$.fn.accordion=function(options){return this.each(function(){var settings=$.extend({firstChildExpand:true,multiExpand:false,slideSpeed:500,dropDownIcon:'▼'},options);$(this).children("h1").each(function(){$(this).next('div').andSelf().wrapAll("<div class='accordion-item'></div>");});$(this).children().children('div').addClass("accordion-content");$(this).find("h1").wrap("<div class='accordion-header'></div>");$(this).find("h1").after("<div class='accordion-header-icon'>"+settings.dropDownIcon+"</div>");$(this).children('.accordion-item').wrap('<div class="drawer"></div>');if(settings.firstChildExpand==true){$(this).find(".accordion-header:first").toggleClass("accordion-header-active");$(this).find(".accordion-header:first").parent().toggleClass("accordion-item-active");$(this).find(".accordion-header:first").next().slideToggle(0);$(this).find(".accordion-header:first").children(".accordion-header-icon").toggleClass("accordion-header-icon-active");}$(this).find(".accordion-header").click(function(){if(settings.multiExpand==false){if(!$(this).hasClass('accordion-header-active')){$(this).parent().parent().parent().find(".accordion-header-active").removeClass('accordion-header-active');$(this).parent().parent().parent().find(".accordion-item-active").children(".accordion-content").slideUp(settings.slideSpeed);$(this).parent().parent().parent().find(".accordion-header-icon-active").removeClass("accordion-header-icon-active");$(this).parent().parent().parent().find(".accordion-item-active").removeClass("accordion-item-active");}}$(this).toggleClass("accordion-header-active");$(this).parent().toggleClass("accordion-item-active");$(this).next().slideToggle(settings.slideSpeed);$(this).children(".accordion-header-icon").toggleClass("accordion-header-icon-active");});});}}(jQuery));</script>
| |
| − | <link href="woco-accordion.min.css" rel="stylesheet">
| |
| − | <style>
| |
| − | body
| |
| − | {
| |
| − | font-family: sans-serif;
| |
| − | }
| |
| − | .accordion
| |
| − | {
| |
| − | max-width: 300px;
| |
| − | margin: 5px auto;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| | <body> | | <body> |
| − | | + | |
| − | <h1>Section 1</h1>
| + | <h2>Naam</h2> |
| − | <div>
| + | <div class="container"> |
| − | Content 1<br>Content 1<br>Content 1<br>Content 1<br>
| + | <div class="name"> |
| − | </div>
| + | <xsl:value-of select="name"/> |
| − | <h1>Section 2</h1>
| + | <xsl:text></xsl:text> |
| − | | + | <xsl:value-of select="firstname"/> |
| − | Content 2<br>Content 2<br>Content 2<br>Content 2<br>
| + | </div> |
| − | </div>
| + | <xsl:if test="publish='Yes'"> |
| − | <h1>Section 3</h1>
| + | <div class="header"> |
| − | <div>
| + | <span>meer</span> |
| − | Content 3<br>Content 3<br>Content 3<br>Content 3<br>
| + | </div> |
| − | </div>
| + | <div class="content"> |
| − | </div>
| + | <h2>Motivatie</h2> |
| − | <script>
| + | <p> |
| − | $(".accordion").accordion();
| + | <xsl:value-of select="motivation"/> |
| − | </script>
| + | </p> |
| | + | </div> |
| | + | </div> |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | <script type="text/javascript"> |
| | + | $(".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") ? "minder" : "meer"; }); }); }); |
| | + | </script> |
| | + | |
| | </body> | | </body> |
| | </html> | | </html> |
