Blame - node_modules/mdl-ext/src/accordion/snippets/accordion.html - hores-external

<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect mdlext-light-color-theme"

874

role="tablist" aria-multiselectable="true">

875

<span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>

</header>

<h5>Content #1 goes here</h5>

884

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.

885

Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero

886

in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,

887

ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.

888

</p>

889

<p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel

890

justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis

891

mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor

892

neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis

893

blandit leo ullamcorper vel.

</p>

</section>

</li>

</header>

<h5>Content #2 goes here</h5>

904

<p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie

905

arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.

</p>

</section>

</li>

<i class="material-icons">warning</i>

912

<span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>

</header>

<h5>Content #3 goes here</h5>

917

<p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,

918

ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac

919

maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.

</p>

</section>

</li>

<i class="material-icons">accessibility</i>

926

<i class="material-icons">help_outline</i>

927

<i class="material-icons">radio</i>

928

<span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>

929

</header>

930

931

<h5>Content #4 goes here</h5>

932

<p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,

933

ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac

934

maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.

</p>

</section>

</li>

<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>

941

<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>

942

<span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>

</header>

<h5>Content #5 goes here</h5>

947

<p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,

948

ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac

949

maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.

</p>

</section>

</li>

</ul>

</div>

955

</div>

All images appearing in this page are the exclusive property of Leif Olsen and are protected under the United States and International Copyright laws.

961

The images may not be reproduced or manipulated without the written permission of Leif Olsen.

962

Use of any image as the basis for another photographic concept or illustration (digital, artist rendering or alike) is a violation of the United States and International Copyright laws.

</p>

(function() {

'use strict';

function insertPanel() {

971

var panel =

972

'<li class="mdlext-accordion__panel">'

973

+ '<header class="mdlext-accordion__tab" aria-expanded="true">'

974

+ '<span class="mdlext-accordion__tab__caption">New Tab</span>'

975

+ '<i class="mdlext-aria-toggle-material-icons"></i>'

976

+ '</header>'

977

+ '<section class="mdlext-accordion__tabpanel">'

978

+ '<h5>New tab content</h5>'

979

+ '<p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie'

980

+ 'arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.'

+ '</p>'

+ '</section>'

+'</li>';

var accordion = document.querySelector('#demo-accordion-6');

986

accordion.insertAdjacentHTML('beforeend', panel);

987

}

988

989

window.addEventListener('load', function() {

990

991

// Listen to accordion toggle event

992

document.querySelector('#demo-accordion-6').addEventListener('toggle', function(e) {

993

//console.log('Accordion tab toggled. New state:', e.detail.state, 'Tab:', e.detail.tab, 'Tabpanel:', e.detail.tabpanel);

994

console.log('Accordion tab toggled. New state:', e.detail.state);

995

});

996

997

// Interact with accordion using public methods

998

document.querySelector('#btn-api-expand-all').addEventListener('click', function(e) {

999

var accordion = document.querySelector('#demo-accordion-6');

1000

accordion.MaterialExtAccordion.command( {action: 'open'} );

1001

});

1002

1003

document.querySelector('#btn-api-collapse-all').addEventListener('click', function(e) {

1004

var accordion = document.querySelector('#demo-accordion-6');

1005

accordion.MaterialExtAccordion.command( {action: 'close'} );

1006

});

1007

1008

document.querySelector('#btn-api-open-tab2').addEventListener('click', function(e) {

1009

var accordion = document.querySelector('#demo-accordion-6');

1010

var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2) .mdlext-accordion__tab');

1011

accordion.MaterialExtAccordion.command( {action: 'open', target: tab2} );

1012

});

1013

1014

document.querySelector('#btn-api-close-tab2').addEventListener('click', function(e) {

1015

var accordion = document.querySelector('#demo-accordion-6');

1016

var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');

1017

accordion.MaterialExtAccordion.command( {action: 'close', target: tab2} );

1018

});

1019

1020

document.querySelector('#btn-api-toggle-tab2').addEventListener('click', function(e) {

1021

var accordion = document.querySelector('#demo-accordion-6');

1022

var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');

1023

accordion.MaterialExtAccordion.command( {action: 'toggle', target: tab2} );

1024

});

1025

1026

document.querySelector('#btn-api-new-tab').addEventListener('click', function(e) {

1027

insertPanel();

1028

var accordion = document.querySelector('#demo-accordion-6');

1029

var panelElement = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:last-child');

1030

accordion.MaterialExtAccordion.command( {action: 'upgrade', target: panelElement} );

1031

});

1032

1033

// Interact with accordion using custom event

1034

var eventButtons = document.querySelectorAll('button[id^="btn-event-"]');

1035

for (var i = 0, n = eventButtons.length; i < n; i++) {

1036

eventButtons[i].addEventListener('click', function(e) {

1037

var ce;

1038

var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');

1039

1040

switch (e.target.id) {

1041

case 'btn-event-expand-all':

1042

ce = new CustomEvent('command', { detail: { action : 'open' } });

1043

break;

1044

case 'btn-event-collapse-all':

1045

ce = new CustomEvent('command', { detail: { action : 'close' } });

1046

break;

1047

case 'btn-event-open-tab2':

1048

ce = new CustomEvent('command', { detail: { action : 'open', target: tab2 } });

1049

break;

1050

case 'btn-event-close-tab2':

1051

ce = new CustomEvent('command', { detail: { action : 'close', target: tab2 } });

1052

break;

1053

case 'btn-event-toggle-tab2':

1054

ce = new CustomEvent('command', { detail: { action : 'toggle', target: tab2 } });

1055

break;

1056

case 'btn-event-new-tab':

1057

insertPanel();

1058

var panelElement = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:last-child');

1059

ce = new CustomEvent('command', { detail: { action : 'upgrade', target: panelElement } });

break;

default:

return;

}

var accordion = document.querySelector('#demo-accordion-6');

1065

accordion.dispatchEvent(ce);

});

}

});

}());

</script>