[accordion block] accordion page builder #pagebuilder #php

accordion.js

var $toggle = jQuery('.accordion-toggle'),
		$accordionText = jQuery('.accordion-descriptionText');

$toggle.on('change', function() {
	jQuery(this).parent().find( $accordionText ).toggleClass('active');
});

accordion.php

<?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.scss

.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: '-';
        }

    }

}

accordion.twig

{% 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 %}