<section class="accordion-block">
<div class="accordion-block__inner">
<div class="accordion-block__header">
<h3 class="heading heading--medium">Questions to ask the doctors:</h3>
</div>
<div class="accordion-block__intro">
<p>
<p>Lorem distinctio ea reprehenderit unde nobis facere Quod ipsam impedit ab distinctio incidunt! Sint reiciendis velit deleniti consequatur quam Nostrum sit consectetur fuga temporibus officia Repellendus iure repudiandae non earum.</p>
</p>
</div>
<div class="accordion" id="accordion" role="presentation">
<div id="question-#1-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-724517264-0" id="heading-724517264-0" type="button">
<h3 class="heading heading--small">Question #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<svg id="accordion__toggle-trigger-724517264-0" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-724517264-0" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-724517264-0" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-724517264-0" role="region" aria-labelledby="heading-724517264-0" aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives through innovative
medicines in oncology , neuroscience and rare diseases.</p>
</div>
</div>
<div id="question-#2-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-724517264-1" id="heading-724517264-1" type="button">
<h3 class="heading heading--small">Question #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<svg id="accordion__toggle-trigger-724517264-1" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-724517264-1" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-724517264-1" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-724517264-1" role="region" aria-labelledby="heading-724517264-1" aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives through innovative
medicines in oncology , neuroscience and rare diseases.</p>
</div>
</div>
<div id="question-#3-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-724517264-2" id="heading-724517264-2" type="button">
<h3 class="heading heading--small">Question #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<svg id="accordion__toggle-trigger-724517264-2" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-724517264-2" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-724517264-2" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-724517264-2" role="region" aria-labelledby="heading-724517264-2" aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives through innovative
medicines in oncology , neuroscience and rare diseases.</p>
</div>
</div>
<div id="question-#4-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-724517264-3" id="heading-724517264-3" type="button">
<h3 class="heading heading--small">Question #4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<svg id="accordion__toggle-trigger-724517264-3" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-724517264-3" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-724517264-3" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-724517264-3" role="region" aria-labelledby="heading-724517264-3" aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives through innovative
medicines in oncology , neuroscience and rare diseases.</p>
</div>
</div>
</div>
</div>
</section>
/* @wysiwyg-content */
.accordion-block {
@include poly-padding-x--large;
@include poly-padding-top--large;
// background-image: url('data:image/svg+xml;utf-8,\
// <svg width="60" height="100" xmlns="http://www.w3.org/2000/svg"><path fill="#B2B2B2" d="M58 0h2v5h-2z" fill-rule="evenodd"/></svg>
// ');
position: relative;
&__header {
@include poly-margin-bottom--large;
}
&__intro {
@include content-wrap;
@include poly-margin-bottom--large;
margin-top: -$base-spacing;
p {
font-size: 14px;
}
}
&__inner {
width: 100%;
position: relative;
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
p {
&:last-child {
img.size-full {
@include poly-margin-minus-bottom-large;
}
}
}
img.size-full {
@include poly-margin-minus-left-large;
@include poly-margin-y--large;
max-width: none;
}
img.alignleft {
float: left;
margin-right: 1.5rem;
}
img.alignright {
float: right;
margin-left: 1.5rem;
}
}
}
<?php
$accordion = array (
'key' => 'accordion',
'label' => 'Accordion',
'name' => 'accordion-block', //defines the Twig file you're using
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'accordion__Title',
'label' => 'Section Title',
'name' => 'title',
'type' => 'text',
),
array (
'key' => 'accordion_actually_section_label',
'label' => 'Section Label',
'name' => 'blocklabel',
'type' => 'text',
'instructions' => __('This label appears in in-page navigation and within the content of some blocks, overriding the title.', 'ipsen-master'),
),
array(
'key' => 'hide_block',
'label' => 'Hide this block from anchor links',
'name' => 'hide_block',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array(
'key' => 'accordion_intro',
'label' => 'Intro',
'name' => 'intro',
'type' => 'wysiwyg',
'tabs' => 'visual',
'media_upload' => 1,
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
),
array(
'key' => 'accordion__Accordions',
'label' => 'Accordions',
'name' => 'accordions', // has to match the variable in the Twig file.
'layout' => 'block',
'type' => 'repeater',
'button_label' => 'Add Accordion',
'sub_fields' => array (
array(
'key' => 'accordionHeader',
'label' => 'Heading',
'name' => 'accordionHeader',
'type' => 'text',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'maxlength' => '',
),
array(
'key' => 'accordionContent',
'label' => 'Content',
'name' => 'accordionContent',
'type' => 'wysiwyg',
'tabs' => 'visual',
'media_upload' => 1,
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
),
),
),
),
'parent' => 'contentblocks_flex', //flex field key
'parent_layout' => '56ff5b1a77c76', // layout key
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $accordion);