Hide an element when a toggle is checked in PHP/Laravel - php

Question

I am trying to hide an element on my page when I click a toggle and unhide it when I click the toggle again. Here is my HTML code:
<div class="form-group settings-row">
{{ Form::label('notificationSettings', 'Notification Settings', array('class' => 'col-md-2 control-label')) }}
<div class="col-md-10">
<table style="border-width:0; margin-top:4px;">
<tr>
<td>
Notifications Enabled
</td>
<td>
<div class="onoffswitch" style="margin:4px 0 0 7px;">
<input type="checkbox" #if($notificationsEnabled == true)checked #endif name="notifications_toggle" class="onoffswitch-checkbox" id="notifications_toggle">
<label class="onoffswitch-label" for="notifications_toggle">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</td>
<td></td>
</tr>
</table>
<div class="col-md-10">
#foreach($notificationMessageRadios as $radio)
#if(isset($radio['text']))
<div class="row" style="margin-bottom:1em;">
<input type='radio' name='notificationMessage' id="notificationmessage-other" value="" #if($radio['selected']) checked #endif> {{$radio['message']}}
</div>
<input type="text" id="notificationMessageCustom" placeholder="Pick your own!" #if($radio['selected'])value="{{ $settingsForMessages->notification_message }}" #else value="Pick your own!" #endif name="notificationMessageCustom" class="form-control" #if(!$radio['selected'])style="display:none"#endif>
#else
<div class="row">
<input type='radio' name='notificationMessage' value="{{ $radio['message']}}" #if($radio['selected']) checked #endif> {{ $radio['message'] }}
</div>
#endif
#endforeach
</div>
</div>
</div>
Breakdown:
So when I click the onoffswitch to be on, I want the radios to appear. When I click the onoffswitch to be off, I want the radios to disappear.
I am being thrown into this project, so this code already existed and I am being tasked with editing some features. Any kind of help would be greatly appreciated.
As a bonus, here is the controller side:
$notificationsEnabled = ( $settings['notificationsEnabled'] == 1);
// Cast notification messages to a variable
$notificationMessageMsgs = \Config::get('customer_messages.notificationMessageArray');
$numNotificationMessageMsgs = count($notificationMessageMsgs);
$notificationMessageSelected = false;
// Determine which email subject radio button is checked
foreach($notificationMessageMsgs as $index => $msg) {
$isSelected = false;
if ($settingsForMessages->notification_message == null && $index == 0) {
$notificationMessageSelected = true;
$isSelected = true;
}
if($msg['message'] === $settingsForMessages->notification_message){
$isSelected = true;
$notificationMessageSelected = true;
}
if($index == $numNotificationMessageMsgs - 1 && !$notificationMessageSelected){
$isSelected = true;
}
$notificationMessageRadios[] = array_merge(['selected' => $isSelected], $msg);
}
I am NOT looking for hand holding. I am looking for guidance, that is all.

Answer 1

Maybe try out jQuery?
Try out jQuery Toggle : https://www.w3schools.com/jquery/eff_toggle.asp
$("button").click(function(){
$("p").toggle();
});
This is the code copies from the link . just target your "Class" , "ID" , "element" in the top row $("button") that needs to be clicked and than target the element that needs to be shown/hidden $("p")