ワードプレスをインストールすると最初からインストールされている有名なプラグイン「Hello Dolly」。

これはただのプラグインではありません。Louis Armstrong によって歌われた最も有名な二つの単語、Hello, Dolly に要約された同一世代のすべての人々の希望と情熱を象徴するものです。このプラグインを有効にすると、すべての管理画面の右上に Hello, Dolly からの歌詞がランダムに表示されます。

ということで、素敵なプラグインです。

だいたい消されてしまうのですが、ランダム表示プログラムに使えるのでは？と改良してみました。

作者のMatt Mullenwegさんリスペクトをこめて。

<?php
function hello_dolly_get_lyric() {
	$lyrics ="Hello, Dolly
(*´ω｀*)
( ˘ω˘ )スヤァ
(*^◯^*)";
	$lyrics = explode("\n", $lyrics );
	return wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );
}
	$chosen = hello_dolly_get_lyric();
	echo"<p id='dolly'>$chosen</p>";
?>

サンプル
https://promenade.in/run-wordpress-hello-dolly/

トグルではなく、jqueryでclassを加えたり、外したり。
見た目はCSSでやるため用途はいろいろあります。

初歩的ですがシンプルにしました。（自分用に）

Jquery

$(function() {
$('.btn').click(function(){
if($('#area').hasClass('bold')){
	$('#area').removeClass('bold');
} else {
	$('#area').addClass('bold');
}
});
});

CSS

.bold span{
	background: -webkit-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: -o-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: linear-gradient(transparent 60%, #ff1493 60%)!important;
	font-weight:bold;
}

HTML

<button class="btn">PUSH</button>
<section id="area">jqueryの<span>addClass(),removeClass(),hasClass()</span>を使用した切替スイッチ。見た目はCSSで制御するため用途は色々。</section>

サンプル

http://promenade.in/run/adclass.html

Jquery

$(function() {
	$('.overbtn').click(function() {
		$(".overlay").fadeToggle();
		});
	$('.overlay').click(function() {
		$(".overlay").fadeToggle();
		});
});

CSS

.overlay {
	position: fixed;
	top: 0;
	z-index: 3;
	display: none;
	width: 96%;
	padding: 2%;
	height: 100vh;
	background-color: rgba(0,0,0,10.8);
}

HTML

<div class="overlay"></div>
<button class="overbtn">PUSH</button>

サンプル