Problem: You have description field in your custom component, and need to show intro text and show full text once read more button is pressed. This will help to save page space and will be mobile friendly as well.
Solution:
As we know in article editor there is readmore button available, which insert horizontal rule with readmore id. Usually it only works with Joomla article component, or custom module once prepare content option is set to 'Yes'.
It would be charming if it works with your custom build component too.
Consider following code and insert into template file at appropriate place where you have to show your description detailed contents.
<?php
// Load Joomla's content helper
$content = $company_profile;
if (strpos($content, '<hr id="system-readmore" />') !== false) {
list($intro, $full) = explode('<hr id="system-readmore" />', $content, 2);
echo '<div class="readmore">';
echo '<div class="intro-text">' . $intro . '</div>';
echo '<div class="full-text" style="display:none;">' . $full . '</div>';
echo '<button class="profile_readmore p-1 m-1" onclick="';
echo 'this.parentElement.querySelector(\'.full-text\').style.display=\'block\';';
echo 'this.parentElement.querySelector(\'.intro-text\').style.display=\'block\';';
echo 'this.style.display=\'none\';">Read More</button>';
echo '</div>';
} else {
echo $content;
}
?>
What this code is doing:
It will determine description contents and will find out hr with id=system-readmore and once found. It will use PHP explode function to break content into two arrays intro and full respectively.
Next it will print div and will show intro text and hide full text. Once a button readmore is pressed. By using javascript it will show full text. And will hide readmore button.
Finally!
Apply CSS to class : profile_readmore, for read more button to match your website buttons.
Like that inside style tags.
/* Style the button that is used to open and close the collapsible content */
.profile_readmore {
background-color: #fafafa;
color: #000;
border-bottom: 3px solid #555 !important;
border: 1px solid #888;
}
Still need help! no problem, feel free to contact us Today