Tag Archives: toggle

Toggle a Div’s Visibility with jQuery CodeUnit 18 JAN 2011

To toggle an element in terms of visibility, like a DIV for example, is pretty easy with jQuery and its ultra nifty toggle() function.

First, simply declare the div you wish to hide and show, give it an ID and if you want, set the initial display by using a style attribute like display: none;

Then, create a toggle controller element which you will use for the user to click on in order to trigger the DIV display/hide action. Again, this needs a ID attribute at most:

<p style="cursor:pointer" id="togglecontrol">(Show/Hide)</p>
<div style="display:none;" id="toggle">Toggle Me!</div>

Finally, put it all together with some jQuery code:

    $(document).ready(function(){
        $('#togglecontrol').click(function(){
            $('#toggle').toggle();
        });
    });

So now clicking on the toggle control element will run the toggle() function against the DIV, basically showing and hiding it at will!

Nifty.

SQL: Toggle 1 and 0 Value in an Update SQL Statement CodeUnit 14 JAN 2011

I tend to use a lot of tinyint columns as controllers for my database-held objects, usually sticking to the convention of 1 means on and 0 means off. In other words, the perfect target for a SQL toggle statement!

In order to toggle update a value in SQL, we’ll need to make use of the common SQL control flow function IF. The IF function takes three parameters, the first being the test expression, the second being the term to return if the test expression passes and the third being the term returned if the test expression fails.

So putting this into our 1 or 0 toggle SQL statement, we get:

UPDATE `table` SET `column` = IF(`column` = 1, 0, 1) WHERE `id` = x

It’s pretty intuitive to see what is going on above, now that we understand the form of the fabulous IF SQL function!

Nifty.

Related Link: http://dev.mysql.com/doc/refman/5.1/en/control-flow-functions.html#function_if