Snippets: Show/Hide Row on Click

There isn't any built-in option in the Total theme to create "toggle" rows because Visual Composer and 3rd party addons have a lot of javascript driven modules that would break if the content was hidden to start. For example Visual composer stretched rows, tabs, accordions, sliders, carousels..etc. These would all have to be re-triggered whenever a collapsed row is triggered. Therefore this sort of functionality is best added on a per-usage basis. See the example code below. This is the javascript portfolio of the code you need. Of course you will need to also add a little CSS to your site to hide the row that you want collapsed by default simply by setting it to display:none; by default. Result: https://cl.ly/n8WQ

add_action( 'wp_footer', function() { ?>

	<script>

		( function( $ ) {

			'use strict';

			$( document ).ready( function() {

				// change "open-vc-row-pricing" to be the class used in the module you want to click to open the hidden row
				var $trigger = $( '.open-vc-row-pricing' );

				// change "vc-row-pricing" to be the class used in the hidden row
				var $hiddenRow = $( '.vc-row-pricing' );

				if ( $hiddenRow.length ) {
					$trigger.click( function() {
						$hiddenRow.toggle();
						return false;
					} );
				}

			} );

		} ( jQuery ) );

	</script>

<?php }, 99 );