Hide It WordPress Plugin

Posted on February 14, 2011 by

This WordPress plugin allows you to toggle visibility of any objects from within a post or page using shorttags and CSS selectors or id attribute selectors.

Example:

[hideit hide=".widget-1, #header-div" show=".widget-2, p:contains('Lorem Ipsum')"]

FYI:

.dot indicates this is a class name.
.widget-1
#hash-mark indicates this is an id attribute.
#header-div
If there is no preceding character, it indicates this is a HTML tag.
p:contains('Lorem Ipsum')
A comma must separate each object in the list.

Easy enough. You can get an object’s id or class name by viewing the source code for your webpage. Anything inside hide="" will be hidden and anything inside show="" will be visible.

This plugin supports any of the selectors supported by jQuery.




Download the plugin from my repository or from WordPress.org.

Posted in WordPress | 14 Comments »
Tagged: , , , , , , , , , , , ,

  • Drew Clifton

    Hi I’m looking for this function but I don’t properly understand its usage.

    Here’s the goal. Click on a button (question one, do I wrap the button in a div and give it an id?)

    Content toggles below (a form, also, should I give this content an id?)

    I don’t understand the format of this shortcode.

    Here’s what I have (of course it’s not working)! Let’s assume the problem isn’t the use of the shortcodes for now, can you set me straight?

    [hideit hide="#webform, show="#webbutton"][CSSBUTTON target="http:/drewclifton.com/uploads/report.pdf" color="4BBEDE" float="left"]Download Report[/CSSBUTTON][gravityform id="1" name="Free WordPress Report" title="false" description="false" ajax="true"][/hideit]

    Thanks :)

  • http://jasonlau.biz Jason Lau

    Try this instead -

    Click Me
    Toggle Me!

    jQuery(function($){
    $(“#content”).hide();
    $(“#web-button”).live(‘click’,function(){
    if($(“#content”).is(“:visible”)){
    $(“#content”).fadeOut(‘slow’);
    } else {
    $(“#content”).fadeIn(‘slow’);
    }
    });
    });

    Don’t disable “Hide It” because you need jQuery for the above code to work.

  • Drew Clifton

    Thanks Jason, the result is awesome! Really appreciate your assistance, and the plugin! :)

  • http://jasonlau.biz Jason Lau

    Now, about the shortcode -
    ‘Hide It’ will either hide or show an object when the page initially loads, but only once. Don’t call ‘hide’ AND ‘show’ on the same object.
    For example, [hideit hide="#webform, show="#webbutton"] is incorrect because you are hiding AND showing the same object when the page loads.
    If you want an object hidden when the page loads your shortcode should look similar to this - [hideit hide="#webform"]
    Or to show a hidden object when the page loads -
    [hideit show="#webbutton"]

    You aren’t limited to using the object id as the selector. You may also use a class name or a tag name.
    Some example HTML -
    <p id=”my-paragraph” class=”hideme”>Hide me!</p>
    <p class=”hideme”>Hide me too!</p>
    <p rel=”blue” style=”display:none”>I’m already hidden!</p>
    <p>Don’t hide me!</p>
    <br />
    <strong class=”my-bold-text”>Giggity Goo</strong >

    To hide all objects with the class name “hideme” -
    [hideit hide=".hideme"]

    To hide the paragraph with the id “my-paragraph” -
    [hideit hide="#my-paragraph"]

    Notice a class name is preceded by a .dot whereas an id attribute is preceded by a #hash mark.

    The following example uses the HTML tag as the selector. Notice there is no .dot or #hash mark used when selecting an object by it’s HTML tag.
    Hide all paragraphs - 
    [hideit hide="p"]

    Hide all bold text -
    [hideit hide="strong"]

    SHOW a paragraph which is already hidden and select it by a particular attribute -
    [hideit show="p[rel='blue']“]

    Hide the last paragraph - 
    [hideit hide="p:last"]

    Hide the first paragraph - [hideit hide="p:first"]

    Hide a paragraph based on it’s content -
    [hideit hide=":contains('Giggity')"]

    If you don’t know the object’s id or class name, view the HTML source for the object. In Google Chrome (#1) or Firefox (Firebug), you can right-click on any object and select “Inspect Element” from the context menu. This can help you pinpoint an object’s potential selectors.

    The above examples don’t cover ALL of the possibilities, but hopefully that will help you understand the shortcode better.

    Good luck!

  • http://www.facebook.com/KevinHagerty Kevin Hagerty

    Great plugin! I am using it in conjunction with “Clean Widget IDs” by Hassan Derakhshandeh which can be found in the official WordPress Plugin listings. Its a very simple plugin which allows you to custom name the ID attribute for widgets. You should copy his code and include it in your code, it would make it so much simpler for users of your plugin than having to lookup the class or ID.

  • Rudi

    How do I hide the top menu with this plugin?

  • http://webxecutive.com/ Jason

    First, you need to find the class name or id for the menu. For example, in Chrome, you would right-click on the menu and select “Inspect Element” from the context menu. Find the HTML tag for the object you want to hide, and copy the id attribute or class name for that object. Add the class name or id attribute to the shortcode for Hide It.
    Link me to your site and I’ll do it in under a minute.

  • Morten

    Hi! How can I hide a title on a specific page?

  • http://websitedev.biz/ Web Dev

    First, you determine what the class name or id is for the item you want to hide. An easy way to do this in Firefox or Chrome, is to highlight the text for the title, right-click on it, and select “Inspect Element” from the popup context menu. View the HTML tag for the title, and locate it’s id or class.

    See this screenshot example of inspecting elements in Google Chrome – http://jasonlau.biz/home/wp-content/uploads/2012/07/screenshot-1.png

    You add the Hide-It shorttag to the page by using the Page editor, inserting the element’s id or class name in the shorttag.

    For the example in the screenshot, I would make the shorttag like this -
    [hideit hide="h1.entry-title"]
    That would hide only the title.
    [hideit hide=".entry-header"]
    That would hide the entire header.
    Or, hide multiple elements-
    [hideit hide="h1.entry-title, .sidebar"]

  • Kennedy Jasonalan

    Hi, can i hide a single word (if pliable) in a class? 

    ie: ‘longboard’.Within the following:[hideit hide="#blog_section .section_inn h1, #single .section_inn h1"] 

  • http://websitedev.biz/ Web Dev

    You can hide an entire object, but not only the content of the object.
    Example: [hideit hide="#single .section_inn h1:contains('longboard')"]
    That would hide any h1 containing “longboard”, but not the word “longboard” itself.

  • Krysteah

    So I downloaded this plug in to see if this would work to hide my whole menu bar, is this possible? I’m attempting to create a static page with three single buttons only on screen…and hiding everything else might be a way to go?

  • http://websitedev.biz/ Web Dev

    Yes, you can use it to control visibility for nearly any object.

  • Sparky

    Can you use this plugin to hide Author, date?