Very nice.

It works as expected. Ive also modified it to create a “fadeout” effect that my client wanted, maybe this can be implemented as an option (depends on the background color)? Here is the code Ive modified:

In index.php

$new_string = '<span><a onclick="read_toggle(' . $rnum . ', \'' . addslashes($more) . '\', \'' . addslashes($less) . '\'); return false;" class="read-link" id="readlink' . $rnum . '" style="readlink" href="#">' . addslashes($more) . '</a></span>' . "\n";
	$new_string .= '<div class="read_div" id="read' . $rnum . '" style="height: 90px; overflow: hidden; position: relative;">' . do_shortcode($content) . '<div class="read_div_overlay" id="read_overlay' . $rnum . '" style="display: block;"></div></div>';

	return $new_string;
}

function read_javascript() {
	echo '<script>
	function expand(param) {
		param.style.height = (param.style.height == "90px") ? "100%" : "90px";
	}
	function overlay(param) {
		param.style.display = (param.style.display == "block") ? "none" : "block";
	}
	function read_toggle(id, more, less) {
		el = document.getElementById("readlink" + id);
		el.innerHTML = (el.innerHTML == more) ? less : more;
		expand(document.getElementById("read" + id));
		overlay(document.getElementById("read_overlay" + id));
	}
	</script>';
}

In the css

.read_div_overlay {
top: 0px;
    height: 110px;
    position: absolute;
    width: 100%;
    background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
    background-image: -moz-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
    background-image: -o-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
    background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
    background-image: -ms-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
	}

• This topic was modified 7 years, 8 months ago by aecorn.