Demo: toggle-class

Example 01: Simple resizing by add and remove class from an image.

Click here to resize the image …

Example 02: Modular tab menu.

Lorem ipsum Kafka Pangramm

You can also open a tab by an anchor link. Try it.

Example 03: Simple automatic slideshow.

previous | 01 | 02 | 03 | next

For a slideshow with effect(s) see Slideshow plugin.

<!-- EXAMPLE 01 -->

<h3>Example 01: Simple resizing by add and remove class from an image.</h3>

<p id="example-resize"><a>Click here to resize the image …</a></p>
<p><img width="150" id="the-image" src="pages/toggle-class-demo/marusja.jpg" alt="Marusja" /></p>
 
<!-- EXAMPLE 02 -->

<h3>Example 02: Modular tab menu.</h3>

<p>
	<a class="example-tab" href="toggle-class-demo#lorem-ipsum">Lorem ipsum</a>
	<a class="example-tab" href="toggle-class-demo#kafka">Kafka</a>
	<a class="example-tab" href="toggle-class-demo#pangramm">Pangramm</a>
</p>
 
<div id="example-tab-content">
	<p>
		<a name="lorem-ipsum"></a>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		Aenean commodo ligula eget dolor. Aenean massa.
	</p>
 
	<p>
		<a name="kafka"></a>
		Jemand musste Josef K. verleumdet haben, denn ohne dass er 
		etwas Böses getan hätte, wurde er eines Morgens verhaftet.
	</p>
 
	<p>
		<a name="pangramm"></a>
		Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch 
		Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
	</p>
</div>
 
<p>You can also open a tab by an anchor link. <a href="pages/toggle-class-demo/redirect.html">Try it.</a></p>
 
<!-- EXAMPLE 03 -->

<h3>Example 03: Simple automatic slideshow.</h3>

<p id="slideshow-controls">
	<a class="backward" href=".#">previous</a> | 
	<a class="number">01</a> | 
	<a class="number">02</a> | 
	<a class="number">03</a> | 
	<a class="forward" href="#">next</a>
</p>
 
<div id="slideshow-images">
	<img src="pages/toggle-class-demo/slideshow/IMG_9162.jpg" width="106" height="100" alt="" />
	<img src="pages/toggle-class-demo/slideshow/IMG_9163.jpg" width="117" height="100" alt="" />
	<img src="pages/toggle-class-demo/slideshow/IMG_9369.jpg" width="137" height="100" alt="" />
</div><br />
 
<p>For a slideshow with effect(s) see <a href="slideshow">Slideshow plugin</a>.</p>

/* EXAMPLE 01 */

.larger-image {
	width: 500px;
}
 
/* EXAMPLE 02 */

a.example-tab {
	padding: 1px 3px;
	background-color: #BFBFBF;
	text-decoration: none;
	color: white;
}
 
a.example-active-tab {
	background-color: #7E92AA;
}
 
#example-tab-content {
	width: 250px;
	height: 100px;
}
 
#example-tab-content p {
	display: none;
}
 
#example-tab-content p.visible-tab-content {
	display: block;
}
 
/* EXAMPLE 03 */

#slideshow-images {
	width: 150px;
	height: 100px;
}
 
#slideshow-images img {
	position: absolute;
	display: none;
}
 
#slideshow-images img.visible {
	display: block;
}
 
#slideshow-controls a.active-number {
	color: red;
}

/* EXAMPLE 01 */

#example-resize a:active => #the-image {
	toggle-class: larger-image;
}
 
/* EXAMPLE 02 */

a.example-tab:active => #example-tab-content p {
	toggle-class: visible-tab-content;
	toggle-class-active: example-active-tab;
	toggle-class-behaviour: switch;
}
 
a.example-tab:first => #example-tab-content p {
	toggle-class: visible-tab-content;
	toggle-class-active: example-active-tab;
	toggle-class-behaviour: switch;
}
 
a.example-tab:anchor => #example-tab-content p {
	toggle-class: visible-tab-content;
	toggle-class-active: example-active-tab;
	toggle-class-behaviour: switch;
}
 
/* EXAMPLE 03 */

#slideshow-controls a.number:active => #slideshow-images img {
	toggle-class: visible;
	toggle-class-behaviour: switch;
	toggle-class-active: active-number;
}
 
#slideshow-controls a.backward:active => #slideshow-controls a.number:backward {
	command: click;
}
 
#slideshow-controls a.forward:active => #slideshow-controls a.number:forward {
	command: click;
}
 
#slideshow-controls a.forward:interval=2000 => #slideshow-controls a.number:forward {
	command: click;
}