No announcement yet.

Using a <div> container to toggle hide options

  • Filter
  • Time
  • Show
Clear All
new posts

  • Using a <div> container to toggle hide options

    Hopefully there is someone out there who is good with scripts that can help me out here. Coding is not my strong suit, so I need someone to save me from myself.

    I have a selectable checkbox option that I would like to use to hide/unhide addtional product options when selected or unselected. Specifically, there are some text field options that I would only like to show when the main option is checked off. These text fields are for additional information that needs to be collected only when the option is selected. Here's a section of code from my listing_1.html template file:

    <!--START: optionstemplate-->
    <!--START: textarea-format-->
    [value]: [oprice]<br>
    <textarea cols="30" rows="5" name="textarea[oname]" onClick="this.value='';"></textarea>
    <!--END: textarea-format-->
    <!--START: file-format-->
    [value]: [oprice]<br>
    <input type="file" name="file[oname]" size="20"><br>
    <!--END: file-format-->
    <!--START: title-format-->
    <!--END: title-format-->
    <!--START: checkbox-format-->
    <input type=checkbox name="cb[oname]" value="[value]" onClick="validateValues(document.add,1); javascript:toggleDiv('vehinfo', this.checked);"> [feature] [oprice]<br>
    <!--END: checkbox-format-->
    <!--START: radio-format-->
    <input type=radio name="[oname]" value="[value]" onClick="validateValues(document.add,1);" [selected]> [feature] [oprice]<br>
    <!--END: radio-format-->
    <!--START: dropdown-format-->
    <select name="[oname]" onChange="validateValues(document.add,1);">
    <!--START: option-->
    <option value="[value]" [selected]>[feature] [oprice]</option>
    <!--END: option-->
    <!--END: dropdown-format-->
    <!--START: text-format-->
    <div id="vehinfo" style="display: none;">
    [value]: [oprice]<br>
    <input type=text size=30 name="text[oname]" onClick="this.value='';"><br>
    <!--END: text-format-->

    You can see where I added "javascript:toggleDiv('vehinfo', this.checked)" to the checkbox onclick event.

    In the <tr> below that section, I have separated out the text field option segment and wrapped it in a container: <div id="vehinfo" style="display: none;">. This is set to hide the option fields by default.

    Finally, I added this script to the top of my template file:

    <script language="javascript">
    function toggleDiv(id, show)
    {document.getElementById(id).style.display = show ? 'vehinfo' : 'none';}

    Now, the initial state works (the checkbox is unchecked, and the additional text fields are hidden). But nothing happens when I select the checkbox option. Any idea what I've done wrong here?

  • #2
    Sorry I can't help you with coding this.
    However, I recommend which has the ability to create conditional forms with no coding. You can create surveys, etc, get e-mail notification and now they have an app to format form results in useful formats.


    • #3
      Thanks, but I already use formassembly for my forms. That won't help me here though. This is for the options section of the product listing template.


      • #4
        The challenge is the 3dcart options are taken in one large block.

        In order to do what you are trying to accomplish, your initial checkbox that controls the visibility of the options has to be outside the options block. It has to be manually coded into your listing template. It will be able to turn on all or nothing of your options.

        The Wedding Printer


        • #5
          Ugh. That doesn't sound very promising. If I code the checkbox option outside of the options block, I would also imagine that the options templates won't work either.

          What if I put the script inside of the options block? Would this have the same effect as moving the checkbox option outside of the options block? I tried to do this before without any success, but I don't know if I had it coded correctly or not.
          Last edited by onering; 10-29-2013, 06:00 PM.


          • #6
            Here is a working sample. It uses JQuery. Edit fiddle - JSFiddle

            The Wedding Printer