jlVisi – A jQuery Plugin

jlVisi is a jQuery plugin designed to toggle the visibility of webpage elements from a list of object id’s or class names contained within the rel attribute of any HTML tag.

Insert a list of object id’s or class names in the rel attribute of any HTML tag and jlVisi will
toggle their visibility depending on your command.

This can be useful, for example, if you have a WordPress website and you want to
toggle the visibility of certain widgets for a particular page only.
You could use it like this -

Head:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.jlvisi.js"></script>

<script type="text/javascript">
jQuery(document).ready(function () {
$('#visibility').jlvisi();
});
</script>

Content:
<span id="visibility" rel="!.widget-1,!.widget-2,*.widget-3"></span>

In this example, the span tag could be added to the post or page to control the visibility of the widgets listed in the rel attribute. The ! exclamation mark preceding a class name indicates the object will be hidden. The * asterisk preceding a class name indicates the object will be visible.

Download

Download the source code – Git the source!


Usage

Call “jlvisi()” on any object that can have a rel attribute. The rel attribute holds a delimited list of objects to toggle
visibility. Each object in the list is preceded by a symbol which indicates the visibility state of the object. For example, the hide indicator is the ! exclamation point and the show indicator is the * asterisk.

Example


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.jlvisi.js"></script>

<script type="text/javascript">
jQuery(document).ready(function () {
$('#visibility').jlvisi();
});
</script>
<span id="visibility" rel="!#test-1,*.test-2"></span>

<p class="test-1" id="test-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>

<p class="test-2" style="display: none;" id="test-2">Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

<p>This example hides the first paragraph and shows the second.</p>

If, for example, I wanted to hide the first paragraph on a page –
<span id="visibility" rel="!p:first"></span>
Or if I wanted to hide a certain paragraph that contains the text “Lorem ipsum” –
<span id="visibility" rel="!p:contains('Lorem ipsum')"></span>

Options And Defaults

delimitor : ‘,’

== The character used as the list delimiter in the rel attribute

hide_indicator : ‘!’

== The character used to indicate if an object should be hidden

show_indicator : ‘*’

== The character used to indicate if an object should be visible