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);
}

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%);
	}
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net