REJack
commented
7 years ago Hi DonWagner,
it's not really difficult 😄
I've modifed a bit your HTML with some classes:
<div class="form-group">
<label class="col-sm-4 control-label" for=""></label>
<div class="col-sm-8">
<div class="input-group">
<input type="radio" name="rep" class="minimal" value="none">
None<br>
<input type="radio" name="rep" class="minimal" value="daily">
Daily<br>
<input type="radio" name="rep" class="minimal" value="weekly">
Weekly<br>
</div>
</div>
</div>
<div class="form-group triggerDiv type_none" style="display: none;">
<label class="col-sm-4 control-label" for=""></label>
<div class="col-sm-8">
Test None
</div>
</div>
<div class="form-group triggerDiv type_daily" style="display: none;">
<label class="col-sm-4 control-label" for=""></label>
<div class="col-sm-8">
Test Daily
</div>
</div>
<div class="form-group triggerDiv type_weekly" style="display: none;">
<label class="col-sm-4 control-label" for=""></label>
<div class="col-sm-8">
Test Weekly
</div>
</div>Put this script part after <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
$('document').ready(function(){
$('input[name="rep"]').change(function(){
var val = $('input[name="rep"]:checked').val();
$('.form-group.triggerDiv').hide();
$('.form-group.triggerDiv.type_'+val).show();
});
var val_ref = $('input[name="rep"]:checked').val();
$('.form-group.triggerDiv.type_'+val_ref).show();
});
</script>I hope this helps you.
DonWagner
Hey guys.
I'm no CSS or JQurey expert, so i love this template. I have an issue i would like to get some help with.
In my codes further down, i have 3 radio buttons, which i would like to determine which part of a form to be visible. if the button for "none" is checked, the second form-group should be visible while the third and fourth should be hidden. If the button for "daily" is checked, the third for-group should be visible while the second and fourth should be hidden. And last if the button for "weekly" is checked, the fourth form-group should be visible and the second and third should be hidden.
Whatever solution I've found elsewhere gives me problems. Either they do not work properly when they are transferred to this template, or so they work, but at the same time they make the design of the buttons disappear. (like it removes the class="minimal").
Any idea how to make this work?