Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Semantic element to create a toggle and best practice to undo a function

    Sample:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Toggle</title>
        <style>
            #first {
                color: blue;
            }
            #second {
                border: 1px solid green;
            }
            #third {
                background: tan;
            }
        </style>
    </head>
    
    <body>
        <label for="box">Toggle</label>
        <input type="checkbox" id="box" onchange="toggle();">
        <div id="first">First</div>
        <div id="second">Second</div>
        <div id="third">Third</div>
        <script>
            function toggle() {
                var box = document.getElementById('box');
                var first = document.getElementById('first');
                var second = document.getElementById('second');
                var third = document.getElementById('third');
                if (box.checked) {
                    first.style.color = 'red';
                    second.style.border = '2px dotted blue';
                    third.style.background = 'olive';
                } else {
                    first.style.color = 'blue';
                    second.style.border = '1px solid green';
                    third.style.background = 'tan';
                }
            }
        </script>
    </body>
    
    </html>
    DEMO

    I wonder if an input checkbox is the right element to create a toggle. I also want to know how to undo what I have in the if clause: in else do I have to repeat my stylesheet or is there a shorter neater way to get back to the initial state?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    A checkbox has two states - checked and unchecked - so lends itself well to a toggle. I see no reason to change any of your code if that is the full extent.

    According to the song, which means of transport did Bonnie Prince Charlie use to escape to the Isle of Skye?
    Contestant: A horse.
    Last edited by Philip M; 03-05-2014 at 10:37 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    A checkbox has two states - checked and unchecked - so lends itself well to a toggle. I see no reason to change any of your code if that is the full extent.
    Thanks for the confirmation!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I suggest you use CSS class names instead of using inline css to style the elements. That way, the styles are separate and you don't have to repeat the styles in the else block and also if you need to change them later, you only change the css and not the js.

    Also, it's better to pass the checkbox object or its checked property (if that is the only thing you need in the toggle function). And you can avoid having to specify the label "for" attribute by enclosing the input inside the label.
    Code:
    <label>Toggle <input type="checkbox" id="box" onchange="toggle(this.checked);"></label>
    Code:
    function toggle(boxChecked) {
        var first = document.getElementById('first'),
            second = document.getElementById('second'),
            third = document.getElementById('third');
    
        if (boxChecked) {
            ...
        }
        else {
            ...
        }
    }

  • Users who have thanked glenngv for this post:

    Rain Lover (03-07-2014)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I have updated your jsfiddle - Toggle - JSFiddle

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    I suggest you use CSS class names instead of using inline css to style the elements. That way, the styles are separate and you don't have to repeat the styles in the else block and also if you need to change them later, you only change the css and not the js.

    Also, it's better to pass the checkbox object or its checked property (if that is the only thing you need in the toggle function). And you can avoid having to specify the label "for" attribute by enclosing the input inside the label.
    Code:
    <label>Toggle <input type="checkbox" id="box" onchange="toggle(this.checked);"></label>
    Code:
    function toggle(boxChecked) {
        var first = document.getElementById('first'),
            second = document.getElementById('second'),
            third = document.getElementById('third');
    
        if (boxChecked) {
            ...
        }
        else {
            ...
        }
    }
    Perfect! Alternatively we can give one class to their parent: Demo.
    Last edited by Rain Lover; 03-07-2014 at 03:08 AM.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Rain Lover View Post
    Perfect! Alternatively we can give one class to their parent: Demo.
    That's better. You just have to pass the checked property to the toggle() function to get rid of that box variable.

  • #8
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    That's better. You just have to pass the checked property to the toggle() function to get rid of that box variable.
    I just learned how to do it with one line of JavaScript: demo.
    I wonder what you think.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    It's good to see a one-liner but having a CSS class of true does not make sense.

    You can still have a one-liner with a meaningful class.
    Code:
    function toggle() {
        document.body.className = document.getElementById('box').checked && 'highlight'; //this is short-circuit evaluation technique in js
    }
    And still passing the checked property will make the function shorter.

    Code:
    <input type="checkbox" id="box" onchange="toggle(this.checked);">
    Code:
    function toggle(boxChecked) {
        document.body.className = boxChecked && 'highlight'; 
    }
    But take note that the entire body class if you have multiple classes will be overwritten. It's better to use this:
    Code:
    <input type="checkbox" id="box" onchange="toggle(this.checked);">
    Code:
    function toggle(boxChecked) {
        document.body.className = (boxChecked && 'highlight' && (document.body.className + ' highlight')) || document.body.className.replace(/highlight/, '');
    }
    See updated jsfiddle at Toggle - JSFiddle

  • #10
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    You can still have a one-liner with a meaningful class.
    Code:
    function toggle() {
        document.body.className = document.getElementById('box').checked && 'highlight'; //this is short-circuit evaluation technique in js
    }
    You're right about having a meaningful class. Thanks for the pointer!
    Is it OK to make it meaningful like this: demo.

    By the way, I don't understand the above code. May I know what the complete evaluation is?
    Last edited by Rain Lover; 03-12-2014 at 10:55 PM.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Learn more about short-circuit evaluation technique from here.


  •  

    LinkBacks (?)

    1. 03-05-2014, 02:46 PM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •