Showing/hiding div by selecting radio button

Question

Currently I'm working on the shippingpart of the checkout of our Magento webshop. We have two shippingoptions, both have a radiobutton. The first option has some aditional information, which I only want to be shown when the radiobutton is checked. I found like a 100.000 codes for this, but nothing seems to work.

Both shippingoptions are being called by Magento in one line, like this (first line):

  <input name="shipping_method" type="radio" class="validate-one-required-by-name" value="<?php echo $_rate->getCode() ?>" id="s_method_<?php echo $_rate->getCode() ?>"<?php if($_rate->getCode()===$this->getAddressShippingMethod()) echo ' checked="checked"' ?> />
            <label data-price="<?php echo $_priceExcl; ?>" data-price-incl="<?php echo $_priceIncl; ?>" for="s_method_<?php echo $_rate->getCode() ?>"><!--<b><?php echo $this->getCarrierName($code) ?>:</b>--> <?php echo $_rate->getMethodTitle() ?>
                     <strong>
                     <?php $_excl = $this->getShippingPrice($_rate->getPrice(), $this->helper('tax')->displayShippingPriceIncludingTax()); ?>
                     <?php $_incl = $this->getShippingPrice($_rate->getPrice(), true); ?>

                     <?php echo $_excl; ?>
                     <?php if ($this->helper('tax')->displayShippingBothPrices() && $_incl != $_excl): ?>
                                (<?php echo $this->__('Incl. Tax'); ?> <?php echo $_incl; ?>)
                     <?php endif; ?>
                     </strong>
             </label>
             <?php if ($_isPostnl && $this->getChild('postnl.osc.delivery.options')): ?>
                     <div class="postnl-container" id="postnl_container" style="display:none;">
                     <?php echo $this->getChild('postnl.osc.delivery.options')->setRate($_rate)->toHtml(); ?>
                     </div>
             <?php $_deliveryOptionsShown = true; ?>
             <?php $_methodName = 's_method_' . $_rate->getCode(); ?>
             <?php endif; ?>

Can anyone help me with a code?

Maybe it's good to know that we are using OneStepCheckout and a PostNL extension. The last one takes over the shippingpart of OneStepCheckout. Oh and I'm a newby in PHP and Javascript/Jquery.

Answer 1

There's a few ways to achieve this, I'll explain how I did it lately.

You will have to use javascript to fetch the change of your shipping method and then toggle the element you want to be shown based on which option you selected.

Start off with a layout update handle to add your own javascript file
(eg: app/design/frontend/base/default/layout/local.xml)

<?xml version="1.0"?>
<layout>
    <checkout_onepage_index> //Change this to the OSC handle if it isn't the same
        <reference name="head">
            <action method="addJs">
                <script>my_file.js</script>
            </action>
        </reference>
    </checkout_onepage_index>
</layout>

in this file you'll react to the change of your shipping methods as such:

$(document).on('change', '#checkout-shipping-method-load input[type=radio][name=shipping_method]', function (event) {
    var target = event.target;

    if(target.id == 's_method_<your_carrier>') {
        $('your_element_id').show();
    } else {
        $('your_element_id').hide();
    }

    event.preventDefault();
});

The $('your_element_id') refers to your 'additional information' element you want to show/hide.

And this should be all you need. Keep in mind that element id like '#checkout-shipping-method-load' might be different when using OSC.