Skip to content

Instantly share code, notes, and snippets.

@taotiwordpress
Last active August 26, 2020 19:15
Show Gist options
  • Save taotiwordpress/6c417455c0fff072383a7627759359a9 to your computer and use it in GitHub Desktop.
Save taotiwordpress/6c417455c0fff072383a7627759359a9 to your computer and use it in GitHub Desktop.
[accordion block] accordion page builder #pagebuilder #php
var $toggle = jQuery('.accordion-toggle'),
$accordionText = jQuery('.accordion-descriptionText');
$toggle.on('change', function() {
jQuery(this).parent().find( $accordionText ).toggleClass('active');
});
<?php
namespace Modules;
use Timber;
### Example usage
// $args = [
// 'primary_heading' => get_sub_field('primary_heading'),
// 'heading_description_list' => get_sub_field('heading_description_list'),
// ];
// $new_module = new Accordion($args);
// $new_module->render();
class Accordion {
protected $defaults;
protected $context;
public function __construct( $args=[] ){
$this->defaults = [
'primary_heading' => false,
'heading_description_list' => false,
'classes' => [
'l-module',
'l-module-accordion',
'accordion',
]
];
extract(array_merge($this->defaults, $args));
// echo "<pre>"; print_r($heading_description_list); echo "</pre>";
$this->context = Timber::get_context();
$this->context['primary_heading'] = $primary_heading;
$this->context['heading_description_list'] = $heading_description_list;
$this->context['classes'] = implode(' ', $classes);
}
public function render(){
Timber::render('accordion.twig', $this->context);
}
}
.accordion-primaryHeading {
letter-spacing: -.03em;
margin-bottom: 2rem;
}
.accordion-listItem {
position: relative;
padding: 2.22rem 1.88rem;
background-color: $invert;
box-shadow: 0px 0px 20px 0px rgba($color-night, 0.2);
+ .accordion-listItem {
margin-top: 1rem;
}
}
.accordion-subheading {
position: absolute;
top: -1rem;
left: 0;
}
.accordion-headingText {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
cursor: pointer;
font-size: 1.22em;
font-weight: 700;
line-height: 1.3;
transition: color 100ms linear;
&:hover {
color: $hover;
}
}
@media screen and (max-width: $width-m) {
.accordion-headingText {
flex-direction: column;
}
.accordion-subheading {
position: relative;
padding-right: 55px;
align-self: flex-start;
top: auto;
left: auto;
}
.accordion-title {
width: 100%;
}
}
.accordion-heading {
padding-right: 11rem;
@media screen and ( max-width: 640px ) {
padding-right: 5rem;
}
@media screen and ( max-width: 480px ) {
padding-right: 2.5rem;
}
}
.accordion-circle {
position: absolute;
width: 50px;
height: 50px;
top: -11px;
right: 0;
}
.accordion-circle-inner {
position: relative;
display: block;
width: 50px;
height: 50px;
border: 2px solid $color-night;
border-radius: 5rem;
&::before,
&::after {
content: '';
display: block;
position: absolute;
width: 24px;
height: 2px;
top: 22px;
left: 11px;
background-color: $color-night;
transition:
transform .2s ease-in,
opacity .2s ease-in;
}
&::after {
transform: rotate(90deg);
}
}
.accordion-toggle:checked + label .accordion-circle-inner {
&::before {
transform: rotate(90deg);
opacity: 0;
}
&::after {
transform: rotate(180deg);
}
}
.accordion-descriptionText {
max-height: 0;
margin-top: 0;
height: 0;
letter-spacing: -.025em;
overflow: hidden;
overflow-y: auto;
transition:
max-height .2s linear,
margin-top .2s linear,
opacity .2s linear,
height .2s linear;
opacity: 0;
&.active {
max-height: 100%;
margin-top: .88rem;
opacity: 1;
height: 100%;
}
p {
margin-bottom: 0;
+ p {
margin-bottom: 1.4em;
}
}
}
// This is the checkbox <input>. The checked/unchecked state is what toggles the visibility of the answer.
.accordion-toggle {
position: absolute;
top: 0;
right: 0;
visibility: hidden;
&:checked {
~ .accordion-answerText {
transition: max-height 400ms ease-in, margin 1ms linear;
max-height: 100vh;
margin-top: 3rem;
}
+ .accordion-questionText .accordion-arrow {
content: '-';
}
}
}
{% block accordion %}
<div class="{{ classes }}">
<div class="l-inner">
<div class="l-text-column accordion-inner">
{% if primary_heading %}
<h2 class="accordion-primaryHeading">{{ primary_heading }}</h2>
{% endif %}
{% if heading_description_list %}
<ul class="accordion-list">
{% for pair in heading_description_list %}
<li class="accordion-listItem">
<input class="accordion-toggle" type="checkbox" id="accordion-{{ loop.index0 }}">
<label class="accordion-headingText" for="accordion-{{ loop.index0 }}">
<small class="accordion-subheading smallCaps">{{ pair.subheading }}</small>
<div class="accordion-title">
<div class="accordion-heading">{{ pair.heading }}</div>
</div>
<span class="accordion-circle">
<span class="accordion-circle-inner"></span>
</span>
</label>
<div class="accordion-descriptionText entry-content">
{{ pair.description }}
</div>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>
{% endblock %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment