Announcement

Collapse
No announcement yet.

Checkbox to Show/Hide Options

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Checkbox to Show/Hide Options

    Most of my products are offered with personalization (engraving, etc). All of my competitors have a checkbox for "Add Personalization" that, when clicked, drops down the rest of options menu (so you can pick font style, wording, etc). Right now, I have to display all of the VERY long options (even if you don't want personalization), so customer must scroll a long way to get to Add to Cart button.

    Does anyone know simple code to add to current checkbox code in Listing template to hide rest of options (that come in order after checkbox option), then it will show rest of options when checkbox is selected?

  • #2
    Here is some code. it works with an image not a check-box. So you need to make two images (buttons). "Show Personalization Options" and "Hide Personalization Options": show.png and hide.png and place them in your assets/images folder.
    then put this code before what you want to hide, and put the second section after it. It is cleaner to hide a whole Table, or row (<tr>) in your listing template.
    Code:
    <!-- Toggle add-on Begin section 1 -->
    <script language="javascript"> 
     function toggle5(showHideDiv, switchImgTag) {
            var ele = document.getElementById(showHideDiv);
            var imageEle = document.getElementById(switchImgTag);
            if(ele.style.display == "block") {
                    ele.style.display = "none";
    		imageEle.innerHTML = '<img src="assets/images/Show.png">';
            }
            else {
                    ele.style.display = "block";
                    imageEle.innerHTML = '<img src="assets/images/Hide.png">';
            }
    }
     </script>
        <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="assets/images/Show.png"></a>
    <div id="contentDivImg" style="display: none;">
    <!-- Toggle add-on end section 1 -->
    your html code goes here then close the DIV here
    Code:
    <!-- Toggle add-on Begin section 2 -->
    </div>
    <!-- Toggle add-on End section 2 -->

    Comment


    • #3
      Thanks, elightbox. I may try that. I would prefer the checkbox method, though, if anyone else knows how to do that.

      Comment


      • #4
        I made this pen a while back on codepen to try out the checkbox hack. It's pretty barebones. Also in that pen is a link to a css-tricks article explaining the trick.

        Link is Checkbox Hack Experiment - CodePen

        Also need to include that if I wanted to do something like this in production I would use javascript. And create a toggle button that just shows or hides your options. If you wanted to use the checkbox hack you could include something like Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 but it would make more sense to just use javascript.

        Good Luck
        Last edited by mtbottens; 02-10-2014, 11:12 AM.
        Michael

        JES Restaurant Equipment

        Comment

        Working...
        X