---
{
	"title": "Randomize",
	"language": "en",
	"category": "Plugins",
	"description": "Randomly picks one of the child elements.",
	"tag": "randomize",
	"parentdir": "wb-randomize",
	"altLangPrefix": "wb-randomize",
	"dateModified": "2020-12-09"
}
---
<div class="wb-prettify all-pre hide"></div>

<p>Randomly picks one of the child elements.</p>

<h2>Configuration</h2>
<dl>
	<dt><code>selector</code> (jQuery selector)</dt>
	<dd>Default undefined. When undefined it selects all the children. This attribute specifies the child elements to be displayed.</dd>
	<dt><code>shuffle</code> (boolean)</dt>
	<dd>If true, it will shuffle the order of child components.</dd>
	<dt><code>toggle</code> (CSS class)</dt>
	<dd>Class name that will be toggled in child components and it will toggle the specified class of child components to reveal.</dd>
	<dt><code>number</code> (number)</dt>
	<dd>Optional and use with toggle. Number of child components to be displayed when toggled. Default is set to <code>1</code>.</dd>
</dl>

<h2>Show one random image</h2>
<p>Below example shows one image out of three images randomly. Probability of 33% that a different image will be display on the next page refresh. The name of class that will be toggled is 'hide' in the following three <code>img</code>s.</p>
<div class="mrgn-bttm-md" data-wb-randomize='{ "shuffle": true, "selector": "img", "toggle": "hide" }'>
	<img class="full-width hide" src="../../demos/tabs/img/investinourfuture.jpg" alt="Invest in our Future" />
	<img class="full-width hide" src="../../demos/tabs/img/flytheskies.jpg" alt="Fly the Skies" />
	<img class="full-width hide" src="../../demos/tabs/img/protect-environment.jpg" alt="Protect Environment" />
</div>

<details>
	<summary>Source code</summary>
	<pre><code>&lt;div class="mrgn-bttm-md"" <strong>data-wb-randomize='{ "shuffle": true, "selector": "img", "toggle": "hide" }'</strong>&gt;
	&lt;img class="full-width hide"
		src="../../demos/tabs/img/investinourfuture.jpg" alt="Invest in our Future" /&gt;
	&lt;img class="full-width hide"
		src="../../demos/tabs/img/flytheskies.jpg" alt="Fly the Skies" /&gt;
	&lt;img class="full-width hide"
		src="../../demos/tabs/img/protect-environment.jpg" alt="Protect Environment" /&gt;
&lt;/div&gt;</code></pre>
</details>

<h4>Randomize tables rows</h4>
<p>All five (5) table rows get shuffled on page load.</p>

<table class="table table-bordered">
	<caption>Data sample</caption>
	<thead>
		<tr>
			<th>Column A</th>
			<th>Column B</th>
		</tr>
	</thead>
	<tbody data-wb-randomize='{ "shuffle": true }'>
		<tr>
			<td>Row 1, column A</td>
			<td>Row 1, column B</td>
		</tr>
		<tr>
			<td>Row 2, column A</td>
			<td>Row 2, column B</td>
		</tr>
		<tr>
			<td>Row 3, column A</td>
			<td>Row 3, column B</td>
		</tr>
		<tr>
			<td>Row 4, column A</td>
			<td>Row 4, column B</td>
		</tr>
		<tr>
			<td>Row 5, column A</td>
			<td>Row 5, column B</td>
		</tr>
	</tbody>
</table>

<details>
	<summary>Source code</summary>
	<pre><code>&lt;table class=&quot;table table-bordered&quot;&gt;
	&lt;caption&gt;Data sample&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;Column A&lt;/th&gt;
			&lt;th&gt;Column B&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody <strong>data-wb-randomize='{ "shuffle": true }'</strong>&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 1, column A&lt;/td&gt;
			&lt;td&gt;Row 1, column B&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 2, column A&lt;/td&gt;
			&lt;td&gt;Row 2, column B&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 3, column A&lt;/td&gt;
			&lt;td&gt;Row 3, column B&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 4, column A&lt;/td&gt;
			&lt;td&gt;Row 4, column B&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 5, column A&lt;/td&gt;
			&lt;td&gt;Row 5, column B&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</details>


<h4>Randomize tables rows and toggle 2 rows</h4>
<p>All five (5) table rows get shuffled on page load and 2 of them get the CSS class <code>warning</code>.</p>

<table class="table table-bordered">
	<caption>Data sample</caption>
	<thead>
		<tr>
			<th>Column A</th>
			<th>Column B</th>
		</tr>
	</thead>
	<tbody data-wb-randomize='{ "shuffle": true, "toggle": "warning", "number": 2 }'>
		<tr>
			<td>Row 1, column A</td>
			<td>Row 1, column B</td>
		</tr>
		<tr>
			<td>Row 2, column A</td>
			<td>Row 2, column B</td>
		</tr>
		<tr>
			<td>Row 3, column A</td>
			<td>Row 3, column B</td>
		</tr>
		<tr>
			<td>Row 4, column A</td>
			<td>Row 4, column B</td>
		</tr>
		<tr>
			<td>Row 5, column A</td>
			<td>Row 5, column B</td>
		</tr>
	</tbody>
</table>

<details>
	<summary>Source code</summary>
	<pre><code>&lt;table class=&quot;table table-bordered&quot;&gt;
	&lt;caption&gt;Data sample&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;Column A&lt;/th&gt;
			&lt;th&gt;Column B&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody <strong>data-wb-randomize='{ "shuffle": true, "toggle": "warning", "number": 2 }'</strong>&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 1, column A&lt;/td&gt;
			&lt;td&gt;Row 1, column B&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 2, column A&lt;/td&gt;
			&lt;td&gt;Row 2, column B&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 3, column A&lt;/td&gt;
			&lt;td&gt;Row 3, column B&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 4, column A&lt;/td&gt;
			&lt;td&gt;Row 4, column B&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Row 5, column A&lt;/td&gt;
			&lt;td&gt;Row 5, column B&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</details>

<h3>Randomize attribute value</h3>
<p>Select a random option within a list of options and append it as the value to the defined attribute</p>

<h4>Example 1</h4>
<div class="bg-cover well"
	data-wb-randomize='{
		"attribute": "data-bgimg-srcset",
		"values": [
			"https://placehold.co/1920x300/blue/white.jpg 1920w, https://placehold.co/1200x300/blue/white.jpg 1200w, https://placehold.co/992x300/blue/white.jpg 992w, https://placehold.co/768x300/blue/white.jpg 768w",
			"https://placehold.co/1920x300/green/white.jpg 1920w, https://placehold.co/1200x300/green/white.jpg 1200w, https://placehold.co/992x300/green/white.jpg 992w, https://placehold.co/768x300/green/white.jpg 768w",
			"https://placehold.co/1920x300/orange/white.jpg 1920w, https://placehold.co/1200x300/orange/white.jpg 1200w, https://placehold.co/992x300/orange/white.jpg 992w, https://placehold.co/768x300/orange/white.jpg 768w",
			"https://placehold.co/1920x300/purple/white.jpg 1920w, https://placehold.co/1200x300/purple/white.jpg 1200w, https://placehold.co/992x300/purple/white.jpg 992w, https://placehold.co/768x300/purple/white.jpg 768w"
		]
	}'>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h4 class="mrgn-tp-md">Heading</h4>
		<p>Paragraph</p>
	</div>
</div>
<details>
	<summary>Source code</summary>
	<pre><code>&lt;div class="bg-cover well"
	data-wb-randomize='{
		"attribute": "data-bgimg-srcset",
		"values": [
			"https://placehold.co/1920x300/blue/white.jpg 1920w, https://placehold.co/1200x300/blue/white.jpg 1200w, https://placehold.co/992x300/blue/white.jpg 992w, https://placehold.co/768x300/blue/white.jpg 768w",
			"https://placehold.co/1920x300/green/white.jpg 1920w, https://placehold.co/1200x300/green/white.jpg 1200w, https://placehold.co/992x300/green/white.jpg 992w, https://placehold.co/768x300/green/white.jpg 768w",
			"https://placehold.co/1920x300/orange/white.jpg 1920w, https://placehold.co/1200x300/orange/white.jpg 1200w, https://placehold.co/992x300/orange/white.jpg 992w, https://placehold.co/768x300/orange/white.jpg 768w",
			"https://placehold.co/1920x300/purple/white.jpg 1920w, https://placehold.co/1200x300/purple/white.jpg 1200w, https://placehold.co/992x300/purple/white.jpg 992w, https://placehold.co/768x300/purple/white.jpg 768w"
		]
	}'>
	&lt;div class="well mrgn-tp-md mrgn-bttm-md">
		&lt;h4 class="mrgn-tp-md">Heading&lt;/h4>
		&lt;p>Paragraph&lt;/p>
	&lt;/div>
&lt;/div></code></pre>
</details>

<h4>Example 2</h4>
<div data-wb-randomize='{
	"attribute": "data-ajax-replace",
	"values": [
		"../data-ajax/ajax/data-ajax-extra-en.html",
		"../data-ajax/ajax/data-ajax-extra-2-en.html",
		"../data-ajax/ajax/data-ajax-filter-en.html#filter-id"
	]
}'></div>
<details>
	<summary>Source code</summary>
	<pre><code>&lt;div data-wb-randomize='{
	"attribute": "data-ajax-replace",
	"values": [
		"../data-ajax/ajax/data-ajax-extra-en.html",
		"../data-ajax/ajax/data-ajax-extra-2-en.html",
		"../data-ajax/ajax/data-ajax-filter-en.html#filter-id"
	]
}'>&lt;/div></code></pre>
</details>

<h4>Example 3</h4>
<p>
	Product name: <span data-wb-randomize='{
		"attribute": "data-wb-json",
		"values": [
			"{ \"url\": \"../wb-data-json/demo/data-en.json#/products/0\", \"type\": \"replacewith\" }",
			"{ \"url\": \"../wb-data-json/demo/data-en.json#/products/1\", \"type\": \"replacewith\" }",
			"{ \"url\": \"../wb-data-json/demo/data-en.json#/products/2\", \"type\": \"replacewith\" }"
		]
	}'></span>
</p>
<details>
	<summary>Source code</summary>
	<pre><code>&lt;p>
	Product name: &lt;span data-wb-randomize='{
		"attribute": "data-wb-json",
		"values": [
			"{ \"url\": \"../wb-data-json/demo/data-en.json#/products/0\", \"type\": \"replacewith\" }",
			"{ \"url\": \"../wb-data-json/demo/data-en.json#/products/1\", \"type\": \"replacewith\" }",
			"{ \"url\": \"../wb-data-json/demo/data-en.json#/products/2\", \"type\": \"replacewith\" }"
		]
	}'>&lt;/span>
&lt;/p></code></pre>
</details>
