jcadima
4/19/2017 - 4:23 PM

Hide show elements

Hide show elements


http://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute

Hide and show div buried in bullshit:
basically target a data attribute because radio button on click wont work
since it is buried in bullshit and set to display none

this is the original HTML:
 <div id="radiostruck">
    <input name="truckload_type" type="radio" value="Full" class="form-check-input" id="full">
    <label for="full">Full</label>
    
    <input name="truckload_type" type="radio" value="Partial" class="form-check-input" id="partialtruckload">
    <label for="partialtruckload">Partial</label>
</div><!--radios-->


this is the bullshit it produces:

<div id="radiostruck" class="radios-to-slider medium" style="width: 430.812px;">
    <input name="truckload_type" type="radio" value="Full" class="form-check-input" id="full" style="display: none;">
    <label for="full" class="slider-label" style="left: -6px;">Full</label>
    
    <input name="truckload_type" type="radio" value="Partial" class="form-check-input" id="partialtruckload" style="display: none;">
    <label for="partialtruckload" class="slider-label slider-label-active" style="left: 402.812px;">Partial</label>
    <ins class="slider-level slider-lower-level" data-radio="full" style="left: 5px;"></ins><ins class="slider-level" data-radio="partialtruckload" style="left: 413.812px; display: none;"></ins><ins class="slider-bar transition-enabled" style="display: block; width: 440.812px;"><span class="slider-knob"></span></ins>

</div>




<script>

	$('[data-radio="full"]').on("click", function () {
	    $('#n_pallets').css('display', 'none');
	});
	
	$('[data-radio="partialtruckload"]').on("click", function () {
	    $('#n_pallets').css('display', 'block');
	});
  
</script>