Accueil » Coding » Divi » Reveal the contents of a Divi text module on click

The context

For the needs of a client, I adapted small pieces of code caught right-to-left (part thanks to Pierre Bichet in his article “The effects of transformations and overview in Divi” for transparency) this in order to display the beginning of a text with a slight transparency and display of all content at the click on a button (or a link).

Operation

The method

To make this code work, it should take 5 to 10 minutes. I hope you have already made it a habit to create a child theme (which I suggest you do systematically) :). Otherwise you will have to create one …

  • Start by defining the class “degrade close” to the text module on which you want to apply the effect, For that, go to the “Advanced” tab of your module in the field “CSS Class”
  • add the shortcode in the content of your text. Example: [expand]The text you want to partially hide…[/ expand]

The php code (to add in the “functions.php” file of your child theme):

function expand_shortcode($atts, $content = null) {
$default_class = "button bg-blue";
$a = shortcode_atts( array(
	'more'  => 'More info',
	'less'  => 'Less info',
	'class' => '',
	'style' => '',
), $atts );
$html='<div class="hide">'.$content.'</div>
	<div class="exp-wrappper">
		<span data-more="'.$a['more'].'" data-less="'.$a['less'].'" class="exp-button '.$default_class.' '.$a['class'].'" style="'.$a['style'].'">'.$a['more'].'</span>
	</div>';
	
	return $html;
}
add_shortCode('expand', 'expand_shortcode');

The CSS code (to add in the “style.css” file of your child theme):

/* Button expand */
.hide {
	display:none;
}
.degrade {
	transition:background-color 1300ms ease 0ms,border 1300ms ease 0ms;
}
.degrade.close > *:after {
	content:"";
	position:absolute;
	top:0;
	display:block;
	width:100%;
	height:calc(100% - 36px);
	background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 92%);
}
/* Customization of used classes, add/modify yours here ;) */
.button {
	display:block;
	max-width:150px;
	cursor:pointer;
	padding:4px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	text-align:center;
	color:#fff;
	margin-top:20px;
	transition: background-color 300ms ease 0ms,border 300ms ease 0ms;
}
.button:hover {
	box-shadow:1px 1px 10px 0px rgba(0,0,0,0.3);
}
/* Here I use buttons with orange and blue background ;) */
.bg-orange {
	background:#dd6529;
}
.bg-orange:hover {
	background:#ff5500;
}
.bg-blue {
	background:#4363c8;
}
.bg-blue:hover {
	background:#2e5ff9;
}
/* */

The Javascript code (to add in the “common.js” file of the “js” subdirectory of your child theme):

jQuery(document).ready(function($){
	$(".exp-button").click(function () {
		var lessName = $(this).attr('data-less');
		var moreName = $(this).attr('data-more');
		var duree = 1000;
			if($(this).text()==moreName) {
			$(this).text(lessName);
			$(this).parent().prev().slideDown(duree);
		}
		else {
			$(this).text(moreName);
			$(this).parent().prev().slideUp(duree);
		}
		var x = setTimeout(() => $(this).closest('.degrade').toggleClass('close'), duree);
	});

});

For the javascript code above, you have 2 solutions:

  1. Either add it in the Divi> Integration> Add code at the bottom of the article, before the comments,
  2. Either add it cleanly by integrating it into a separate file (a method I personally prefer), starting by creating a directory named “js” under the folder of your child theme and placing a “common.js” file that will contain all javascript functions that you will use on your site, including the one above. For that you will have to add an extra line after loading your style sheet in your file “functions.php
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_script( 'common-scripts', get_stylesheet_directory_uri() . '/js/common.js', array(), null, true );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

The customization

You can customize the display of your shortcode by defining one or more additional classes as well as style attributes.
Example: [expand class=”aligncenter” style=”color: red;”]The text you want to partially hide…[/ expand]
BTW your “button” will be centered and its text will be red ;). I leave you to imagine all possible forms of customization.

Conclusion

Well, I know it may seem complicated, but don’t worry it’s simple and once you have tasted this type of implementation “segmented”, you’ll can’t do without :)!

Indeed with this type of “process”, we have several advantages:

  1. Better legibility of the code. Each type of code is stored neatly in a drawer:
    • The php in functions.php
    • The CSS in your stylesheet
    • The Javascript in a Javascript file :).
  2. Portability. It’s easier to come and “dunn” a piece of code in each of the file types than to remember and look where they were placed.
  3. Optimization in terms of page loading (and also a bit of SEO). Indeed CSS and JS files are very well concatenated with cache plugins like Swift, WP-Rocket or Autoptimize.
    So less queries and therefore better loading times :)…

That’s it, have fun and no pretense, force yourself to “educate” :). You will see that in the end it is more rewarding and a great benefit to work “cleanly” :D!

 

If you wish to help me to make this blog alive, you can make a donation, below :).

 

Information: Truly conquered by this theme, I registered on the site of ElegantThemes as an affiliate, which means that if you click on the link below and buy the theme I will receive a commission :).

ElegantThemes

 

Après avoir visité les coulisses, découvrez le site :) !

Submit a Comment

Your email address will not be published. Required fields are marked *

Accueil » Coding » Divi » Reveal the contents of a Divi text module on click
Share This