0

i have a field with Radio Buttons: Hide and Show, I want when Hide is selected to hide all fields below and to display all when Show is selected. Below is my code:

<div id="product-options-wrapper" class="product-options">
        <dd>
            <div class="input-box display">
                <ul class="options-list">
                    <li>
                        <input class="radio product-custom-option" type="radio" checked="checked"><label for="options_6032_2">Show</label>
                    </li>
                    <li>
                        <input class="radio product-custom-option" type="radio"><label for="options_6032_3">Hide</label>
                    </li>
                </ul>
            </div>
        </dd>
        
        <dd>
            <div class="input-box fontclass">
                <select>
                    <option>Arial </option>
                    <option>Lato </option>
                    <option>Disney Print </option>
                </select>
            </div>
        </dd>
        
        <dd>
            <div class="input-box">
                <input id="mirror" type="text" value="">
            </div>
        </dd>
        
        <dd class="last">
            <div class="colorclass">
                <select>
                    <option>red </option>
                    <option>black </option>
                </select>
            </div>
        </dd>
</div>

Update:

Radio Buttons don't have a fixed ID or class, the only stable thing in that radio buttons is the text.

Update:

I am almost there i use div:contains function and siblings, the function is work to hide but I don't know why is not work to show again. This is the jquery:

 jQuery('div:contains("Hide ")').on('click', function(){
   jQuery(this).closest('dd').siblings().hide();
});
 jQuery('div:contains("Show ")').on('click', function(){
   jQuery(this).closest('dd').siblings().show();
});

this is my html:

<li>
<input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" price="0" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked">
<span class="label">
<label for="options_6032_2">Hide </label>
</span>
</li>
<li>
<input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" price="100" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()">
<span class="label">
<label for="options_6032_3">
Show
<span class="price-notice">
+
<span class="price">Dkr100.00</span>
</span>
</label>
</span>
</li>

Update:

Maybe this will help, this code is the php code that generate this radio options:

    $selectHtml = '<ul id="options-'.$_option->getId().'-list" class="options-list">';
    $require = ($_option->getIsRequire()) ? ' validate-one-required-by-name' : '';
    $arraySign = '';
    switch ($_option->getType()) {
        case Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO:
            $type = 'radio';
            $class = 'radio';
            if (!$_option->getIsRequire()) {
                $selectHtml .= '<li><input type="radio" id="mylabel options_' . $_option->getId() . '" class="'
                    . $class . ' product-custom-option" name="options[' . $_option->getId() . ']"'
                    . ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
                    . ' value="" checked="checked" /><span class="label"><label for="options_'
                    . $_option->getId() . '">' . $this->__('None') . '</label></span></li>';
            }
            break;
        case Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX:
            $type = 'checkbox';
            $class = 'checkbox';
            $arraySign = '[]';
            break;
    }
Community
  • 1
  • 1
Robert
  • 812
  • 3
  • 18
  • 47

7 Answers7

2

Hiding and showing elements with jQuery/JavaScript is very straightforward. Add a class to the elements you wish to hide (in my example below I have named it hidden), then use the hide and show functions as follows:

$('#options_6032_3').click(function() {
  $('.hidden').hide();
})
$('#options_6032_2').click(function() {
  $('.hidden').show();
})

Check out this jsfiddle to see how it works.

EDIT

Based on the example you have provided in the comments to this answer, this alternative should work:

var hideRadio = $('li:nth-child(2) input:radio');
var showRadio = $('li:first input:radio');

hideRadio.click(function() {
  $(this).closest('dd').siblings(':nth-child(3)').hide();
  $(this).closest('dd').siblings(':nth-child(4)').hide();
})
showRadio.click(function() {
  $(this).closest('dd').siblings(':nth-child(3)').show();
  $(this).closest('dd').siblings(':nth-child(4)').show();
})

Check out this jsfiddle to see how it works.

NOTE: Your dynamically created HTML code will need to be generated in the same format each time (with the dd and dt tags your most recent code contains).

jritchey
  • 126
  • 6
  • Hi your code is work only for hide, after i click to display element again is not show – Robert Feb 26 '16 at 19:42
  • @RobertD Using the code you initially provided, my jsfiddle works (for me). I've noticed you've changed your code. Your question now has two different sets of list items (the first set lacks `name` attributes for the `radio` inputs). Could you please show what your HTML looks like both before and after the input fields are dynamically added? – jritchey Feb 26 '16 at 19:54
  • please take a look here, this is the entire html code that is in my page http://pastebin.com/xMRzcfXR – Robert Feb 26 '16 at 19:57
  • @RobertD I have updated my answer, along with the jsfiddle. If you want absolutely everything after the "Baby sengesæt" title to be hidden, we can adjust the code accordingly. Let me know how it goes. – jritchey Feb 26 '16 at 20:35
  • @RobertD I went ahead and put this [jsfiddle](https://jsfiddle.net/jritchey/hy3r9kn4/) together as the jQuery code might be of help. – jritchey Feb 26 '16 at 21:07
  • if you take a look I write there that we can't use the ID because is dynamically, never will be the same – Robert Feb 26 '16 at 21:13
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104680/discussion-between-jritchey-and-robertd). – jritchey Feb 26 '16 at 21:15
1
if($('#radio').is(':checked')) { alert("it's checked"); }
Arthur Sergheevich
  • 63
  • 7
1

Why don't you add class fields to the <dd> you want to hide and use jQuery or something similar to hide the <dd>. You may also want an identifier like a class or id to the radio buttons. Then you can hide the fields this way.

$(".show").change(function() {
  if(this.checked) {
      $(".fields").show();
  }
});

$(".hide").change(function() {
  if(this.checked) {
      $(".fields").hide();
  }
});

Here's a working fiddle: https://jsfiddle.net/28nboav9/

Is this similar to what you where looking for?

notacyborg
  • 115
  • 1
  • 11
  • Hi I can't add class the structure is the default Magento, to add class there we need to change the core. – Robert Feb 26 '16 at 14:05
  • interesting, are you okay with adding jquery though? If so then, you can use `contains` selector instead of using class. https://api.jquery.com/contains-selector/ – notacyborg Feb 26 '16 at 14:08
  • Hi, thank you for your answer but is not a solution, this fields are added automatically in the admin panel after that is display in the frontend area – Robert Feb 26 '16 at 14:10
1

wrap your html code inside the div which need to be show/hide for better code optimization

HTML

  <div id="product-options-wrapper" class="product-options">
                <dd>
                    <div class="input-box display">
                        <ul id="options-6032-list" class="options-list">
                            <li>
                                <input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked"><label for="options_6032_2">Show </label>
                            </li>
                            <li>
                                <input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()"><label for="options_6032_3">Hide</label>
                            </li>
                        </ul>
                    </div>
                </dd>
        <div id="toggleVisibility">  //wrapped inside div
                <dd>
                    <div class="input-box fontclass">
                        <select id="select_6031" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6031]">
                            <option price="0" value="42969">Arial </option>
                            <option price="0" value="42970">Lato </option>
                            <option price="0" value="42971">Disney Print </option>
                        </select>
                    </div>
                </dd>

                <dd>
                    <div class="input-box">
                        <input id="options_6030_text mirror" class="input-text required-entry validate-length maximum-length-25 product-custom-option form-control" type="text" value="" name="options[6030]" onchange="opConfig.reloadPrice()">
                    </div>
                </dd>

                <dd class="last">
                    <div class="input-box colorclass">
                        <select id="select_6028" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6028]">
                            <option price="0" value="42965">red </option>
                            <option price="0" value="42966">black </option>
                        </select>
                    </div>
                </dd>
    </div>
        </div>

Please add this script into your page/js file

Jquery 

$(document).ready(function () {
    var $div=$('#toggleVisibility');
    $('#options_6032_2').click(function () {
        if ($(this).is(':checked')) {
            $div.show();
        }
    })
    $('#options_6032_3').click(function () {
        if ($(this).is(':checked')) {
           $div.show();
        }
    })
});
Satish Kumar sonker
  • 1,250
  • 8
  • 15
0

Try something like this. It finds the radio's parent DD and hides all it's siblings:

$('#options_6032_2').on('click', function(){
   $(this).closest('dd').siblings().show();
});
$('#options_6032_3').on('click', function(){
   $(this).closest('dd').siblings().hide();
});

It al depends a bit how dynamic your radio's are build up. You might want to assign a specific class for the selector.

Also see this fiddle: https://jsfiddle.net/cp5ses3y/

Yeronimo
  • 1,731
  • 15
  • 28
0

This should work

opConfig.reloadPrice = function(show){
    if(show){
        $('#select_6028,#options_6030_text,#select_6031').show();
    }else{
        $('#select_6028,#options_6030_text,#select_6031').hide();
    }    
}

You can change the selector to hide/show whatever you want. The best way I think, is to add a class to all the field you want to hide/show so you will only do $('.classToHideShow').show()

Here is the code with the modification : https://jsfiddle.net/55mrk3xf/

Ganbin
  • 2,004
  • 2
  • 12
  • 19
0
$("#hide").click(function() {
  $('div.fontclass').hide();
  $('div').children('#mirror').hide();
  $('div.colorclass').hide();
});

$("#show").click(function() {
  $('div.fontclass').show();
  $('div').children('#mirror').show();
  $('div.colorclass').show();
});

Try this. It uses a combination of JQuery and relative selectors to achieve the effect you want. Fiddle: https://jsfiddle.net/ut6jc4vp

McLemore
  • 605
  • 1
  • 6
  • 15