Details
Category: Styles
Hits: 2167

This page uses a child template with an own style and own favicons.

Bonus module override

F.A.Q.

 

faq.php: alternative layout for mod_articles_news (Module Newsflash)

<?php

/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_news
 *
 * @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;
}

?>
<?php foreach ($list as $item) : ?>
	<?php $item_heading = $params->get('item_heading', 'h4'); ?>

	<div class="faq">
		<<?php echo $item_heading; ?> class="panel-title">
			<button aria-expanded="false"><?php echo $item->title; ?> <i class="panel-icon"></i> </button>
		</<?php echo $item_heading; ?>>

		<div hidden="">
			<?php echo $item->introtext; ?>
		</div>
	</div>
<?php endforeach; ?>

Javascript (user.js)

document.addEventListener("DOMContentLoaded", function(){
    (function () {
      const headings = document.querySelectorAll('.panel-title');

      Array.prototype.forEach.call(headings, h => {
        let btn = h.querySelector('button');
        let target = h.nextElementSibling;

        btn.onclick = () => {
          let expanded = btn.getAttribute('aria-expanded') === 'true';

          btn.setAttribute('aria-expanded', !expanded);
          target.hidden = expanded;
        }
      });
    })();
});

CSS (user.css)

/* Collapse */
.faq {
  --color-contrast: #4e61ff;
  margin-bottom: var(--s1);
}
.panel-title {
  border-bottom: 2px solid;
  cursor:pointer;
}
.panel-title button {
  all: inherit;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5em 0;
}
.panel-title button:focus .panel-icon {
	outline: 2px solid var(--color-contrast);
	outline-offset: 4px;
}
.panel-icon {
	width: 60px;
	height: 60px;
	text-align: center;
}
.panel-icon::before {
	content: "+";
}
.panel-title [aria-expanded="true"] .panel-icon::before {
	content: "-";
}