This Joomla 4 override allows you to display a frequently asked questions with a nice spoiler effect simply using Joomla's mod_articles_latest module. At the bottom of this article, you can download the files of the override.
Joomla 4 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_latest
* @author web-eau.net
* @copyright (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
if (!$list)
{
return;
}
?>
<ul class="mod-articleslatest latestnews mod-list">
<?php foreach ($list as $item) : ?>
<div class="spoiler"><span class="spoilerText">Spoiler</span>
<input class="spoilerChecked" type="checkbox" showtext="<?php echo $item->title; ?>"/>
<div class="spoilerContent pt-3"><?php echo $item->introtext; ?></div>
</div>
<?php endforeach; ?>
</ul>CSS
.spoiler {
display:inline;
}
.spoilerText{
display:none;
}
.spoilerChecked{
visibility:hidden;
}
.spoilerChecked:after{
content:attr(showText)"\25B6";
visibility:visible;
}
.spoilerChecked:checked:after{
content:attr(showText)"\25BC";
}
.spoilerContent{
display:block;
height:auto;
max-height:0;
padding-left:10px;
margin-left:5px;
transform: scaleY(0);
transform-origin: top;
border-left: 1px solid #000;
transition: max-height 0.2s, transform 0.2s;
}
.spoilerChecked:checked + .spoilerContent{
max-height:1000px;
display:block;
transform: scaleY(1);
}Inspiration: https://codepen.io/d1sasterpiece/pen/gxeWdy
This Joomla 3 override allows you to display a frequently asked questions with a nice spoiler effect simply using Joomla's mod_articles_latest module. At the bottom of this article, you can download the files of the override.
Joomla 3 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_latest
* @Author web-eau.net
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="container">
<div class="row">
<?php foreach ($list as $item) : ?>
<details role="group">
<summary role="button" aria-expanded="false"><strong>
<?php echo $item->title; ?>
</strong></summary>
<p class="text-left"><?php echo $item->introtext; ?></p>
</details>
<?php endforeach; ?>
</div>
</div>CSS
.details {
margin: 1rem auto;
width: 75%;
}
details p {
line-height: 2;
text-align: left;
}
summary {
display: block;
text-align: center;
}
summary::-webkit-details-marker {
display: none;
}
summary:before {
display: inline-block;
content: '\203A';
margin-right: .5rem;
font-weight: bold;
font-size: 1rem;
transition: all 300ms ease;
}
summary:hover {
cursor: pointer;
}
details[open] summary {
color: red;
transition: all 300ms ease;
}
details[open] p {
animation: openDetail 400ms ease;
}
details[open] summary::before {
transform: rotate(90deg);
}
@keyframes openDetail {
0% {
opacity: 0;
background: white;
transform: translateY(0%);
}
50% {
transform: translateY(3%);
}
100% {
opacity: 1;
background: #f9f9f9;
transform: translateY(0%);
}
}Inspiration: https://codepen.io/d1sasterpiece/pen/gxeWdy