I have this collapse in my Laravel project using data from database :-
<div class="col col-md-5">
<div class="card">
<div class="card-header text-right">
<h4>{{__('home.course_card')}}</h4>
</div>
<div class="card-body">
<div id="accordion" >
<div class="card">
#foreach ($mysection as $section)
<?php $sec_name='home.sec'.$section->section_name ;
$collaps_count++;
?>
<div class="w-100 card-header py-0 px-0" id="" style="border: none">
<button class=" btn w-100 text-right bg-light " type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" >
<h5 class="">{{__($sec_name)}}</div></h5>
</button>
</div>
<div style="height:5px"></div>
#foreach ($course->Lession as $lession)
#if ($section->section_name == $lession->section_name)
<div id="collapseOne" class="collapse <?php if($collaps_count == 1) echo
'show'?>" aria-labelledby="headingOne" data-parent="#accordion">
<div class="flex-row d-flex justify-content-between text-right mx-auto
w-100 py-2">
<div>- {{$lession->$less_lang}}</div>
#if ($lession->id==$order->lession_id)
<div class="text-left ml-2"><i class="material-icons"
style="color:green">visibility</i></div>
#else
<div class="text-left ml-2"><i class="material-icons"
style="color:grey">visibility</i></div>
#endif
</div>
</div>
#endif
#endforeach
#endforeach
</div>
</div>
</div>
</div>
</div>
When I have more than two collapse data the switch between them not work correctly ,when I press in first one both second and third collapse open,
How can I make toggle between many collapse depend on data from server?
I solved first issue which happened as a reason of same id name of collapse ,therefore I used this code to change id names :
$collaps_count++;
$nf = new NumberFormatter("en", NumberFormatter::SPELLOUT);
$numbers_name=$nf->format($collaps_count);
$numbers_name=ucfirst($numbers_name);
$collapse_id='collapse'.$numbers_name;
$heading='heading'.$numbers_name;
Related
When I am putting the whole card into the form tag in HTML then the js is not working please give me a solution. I want to put form because the enter key of the keyboard is not working. and I want that to work, and in future, i want to save the conversation into the database model , the backend is made up of Django.
here is my html:
<section>
<div class="container py-5">
<div class="row d-flex justify-content-center">
<form>
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center p-3"
style="border-top: 4px solid blue; background-color:#3792cd;" >
<h5 class="mb-0" style="text-align:center; color:white;">Your chatbot is here!
</h5>
<div class="d-flex flex-row align-items-center">
<i class="fa fa-minus me-3 text-muted fa-xs"></i>
<i class="fa fa-comments me-3 text-muted fa-xs"></i>
<i class="fa fa-times text-muted fa-xs"></i>
</div>
</div>
<div class="card-body" data-mdb-perfect-scrollbar="true" style="height: 440px;
overflow-y:auto">
<h5>Let's Chat<img style=""></h5>
<div id="chatbot">
</div>
</div>
<div class="card-footer text-muted d-flex justify-content-start align-items-
center p-3" style="text-align:center; background-color:#3792cd">
<div class="input-group mb-0">
<input type="text" class="form-control" id="textInput" name="userMessage"
placeholder="Type message"
aria-label="Recipient's username" aria-describedby="button-addon2" />
<button type="submit" id="buttonInput" style="padding-top: .55rem;">
Send<i class="fa fa-send" style="padding-left: 0.5em;"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<section>
</form>
Here is my Java scripts:
function getUserResponse(){
var userText = $('#textInput').val();
var userHTML = "<div class='userhtml'><div class='img'><img style='width:36px'
src='https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375__340.png'/></div><div
class='userText'><span>"+userText+"</span></div></div>";
$('#textInput').val("");
$('#chatbot').append(userHTML);
$.get('/getResponse',{userMessage:userText}).done(function(data){
var returnedMessage = "<br/><div class='bothtml'><img style='width:46px'src=''/><p
class='botText'><span>"+ data +"</span/></p></div>";
$('#chatbot').append(returnedMessage);
})
}
$('#buttonInput').click(function(){getUserResponse();})
if you tell me how to store the conversation into the django model it will be really appriciated too
Thankyou!
in my project I want to show statistics for the current month and the current year. To split this statistics I created a card with tabs that split month and year.
The month tab is loaded as default. If i now go on the year tab everything is loading but then it will load unlimited empty "stuff / white data" (I don't know how to explain it better), and you can't use this tab because the site will be bigger and bigger. There is also no error in the
This has first been poped up after I changed alle my charts (chart.js) to an dynamic way that you can go e.g. to the next month or the month before. If I load all charts with "fixed" data then the tab works correctly.
What is the problem?
Actual look:
How it has to be looked:
After some testing i see this:
Code snippet:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-header">
<div>
<ul class="nav nav-pills nav-fill mt-4" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-bs-toggle="tab" href="#Month" role="tab">
<span><strong>Current Month</strong></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#Year" role="tab">
<span><strong>Current Year</strong></span>
</a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="month"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-month" id="last-month"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-month" id="current-month">Current Month</button>
<button class="btn btn-info next-month" id="next-month"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="monthly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="monthy_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="monthly_training_days"></h2>
<h2 class="card-title text-white" id="monthly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="monthy_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="monthly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Year" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="year"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-year" id="last-year"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-year" id="current-year">Current Year</button>
<button class="btn btn-info next-year" id="next-year"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="yearly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="yearly_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="yearly_training_days"></h2>
<h2 class="card-title text-white" id="yearly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="yearly_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="yearly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After a lot of researching and reading i found the solution for this problem.
The problem occurs because of the hidden content from the hidden tab, which is realized in Bootstrap via "display: none".
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none; /* this is the problem */
}
To fix this problem you can use height: 0 and overflow-y: hidden to this . Now the charts will stay in place and no empty random space will created.
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}
It will take a little minute to go through that line by line but some of the problem is sure to be your structure of Rows and Columns. I noticed this in the first few lines - Just inside the tab-content is this...
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
With Bootstrap you're not really meant to have the Row's inside the Column's and I think what's happening is that the un-natural layout of the code is creating errors like the one you see. This answer does not discover where your white-space is coming from but I do suspect that fixing the layout of the code will also fix the white-space.
I have the following select box:
<select class="form-control select2-single" data-width="100%" name="numero_projet" id="numero_projet">
<option label=" "> </option>
#foreach($projets as $projet)
<option data-id="{{$projet->id_projet}}" value="{{$projet->id_projet}}">{{$projet->numero_projet}}</option>
#endforeach
</select>
And the following ajax code to get data :
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
success:function(html){
var content = html.content;
$("div.name_casting").append(content.id_casting);
}
})
})
})
</script>
And the following controller:
public function getProjet()
{
if(request()->ajax())
{
$id_projet = request('numero_projet');
$projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
return response()->json(['projets_casting' => $projets_casting]);
}
}
And I have the following view where I should display the data that I get from controller:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select from Library</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#foreach($projets_casting as $projet_casting)
<div class="modal-body scroll pt-0 pb-0 mt-4 mb-4">
<div class="accordion" id="accordion">
<div class="mb-2">
<button class="btn btn-link p-0 folder-button-collapse" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="icon-container">
<i class="simple-icon-arrow-down"></i>
</span>
<span class="folder-name">Castings</span>
</button>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="col-6 mb-1 sfl-item-container casting"
data-preview-path="img/products/chocolate-cake-thumb.jpg"
data-path="img/products/chocolate-cake-thumb.jpg"
data-label="chocolate-cake-thumb.jpg">
<div class="card d-flex mb-2 p-0 media-thumb-container">
<div class="d-flex align-self-stretch">
<img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
class="list-media-thumbnail responsive border-0" />
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100">
<p class="truncate mb-0">{{$projet_casting->id_casting}}</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary sfl-submit">Selectionner</button>
</div>
</div>
</div>
It should display in this div the id_casting of each projects
<div class="w-100 name_casting">
<p class="truncate mb-0">ok</p>
</div>
But I get the following error:
Uncaught TypeError: Cannot read property 'id_casting' of undefined
What is wrong with my code?
Update
I have the following HTML in my view:
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="col-6 mb-1 sfl-item-container casting"
data-preview-path="img/products/chocolate-cake-thumb.jpg"
data-path="img/products/chocolate-cake-thumb.jpg"
data-label="chocolate-cake-thumb.jpg">
<div class="card d-flex mb-2 p-0 media-thumb-container casting2">
<div class="d-flex align-self-stretch">
<img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
class="list-media-thumbnail responsive border-0" />
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100 castings">
<p class="truncate mb-0">OK</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And I'm trying the following script:
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
dataType:"json",
success:function(json){
renderTemplate(json)
}
});
function renderTemplate(json) {
var content = ` <div">
<p class="truncate mb-0">${json.id_casting}</p>
</div>`;
$("div.name_casting").append(content);
}
})
})
</script>
But I have nothing. I have always OK and I have no error!
UPDATE2
Now I can get the data that I want, but I get multiple rows in the same time so I should having multiple divs in my HTML.
I'm getting the following result:
While I shoult get the 18 in a div and 19 in other div and not in the same place.
Analogous to #professor's answer:
Use the JSON (recommended)The Controller doesn't have to be modifiedIn your blade/JavaScript, change the following:
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
dataType:"json",
success:function(json){
renderTemplate(json)
}
});
function renderTemplate(json) {
var content = `<div>
${json.castings.map((casting) => casting.id_projet)}
</div>`;
$("div.name_casting").append(content);
}
Use the HTMLThe blade view and JavaScriptIn your controller, change the following:
public function getProjet()
{
if(request()->ajax())
{
$id_projet = request('numero_projet');
$projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
return view('your-view', ['projets_casting' => $projets_casting]);
}
}
Good day,
I am working on this project of mine but unfortunately I'm not skilled enough yet to fix the following problem I have been trying to solve for some time now. I have a webpage that shows the amount of calories that someone needs to consume to hit their training goals. Based on a 3 options radio input selection I want to show 3 different images on the output page based on the selection they made. This can be weight loss, maintenance or muscle gain.
The code is as following:
Code for the input of the goal:
<!-- Goal -->
<div class="row px-md-5 mrow" id="rowtwo">
<div class="col-12 py-5">
<div class="text-center">
<h2 class="text-primary">2. Wat is je doel?</h2>
</div>
</div>
<div class="col-12 col-md-12">
<ul class="row radio-group-goal d-flex flex-stretch p-0 m-0">
<li class="radio col-md-6 selected d-flex flex-stretch mb-2" data-goal="Afvallen / Lager vetpercentage" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100 greenborder">
<h6 class="text-left"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-weight text-primary mr-2"></i> Afvallen / Lager vetpercentage</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">minder kcal/koolhydraten</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Gezonde levensstijl" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-carrot text-primary mr-2"></i> Gezonde levensstijl</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">Gezond</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Aankomen / Meer spiermassa" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-dumbbell text-primary mr-2"></i> Aankomen / Meer spiermassa</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">muscle</p> -->
</div>
</li>
</ul>
</div>
Code for the output:
<div class="col-12 col-md-6">
<div class="row">
<div class="col-12 col-md-6 mb-4 d-flex flex-stretch">
<div class="youchoose-box px-4 py-5 d-flex align-items-center justify-content-center flex-column bg-white rounded shadow-sm w-100" style="border:1px solid white;">
<i class="fas fa-trophy text-center text-primary mb-2"></i>
<!-- <p class="mb-0 text-center">Doel</p> -->
<h5 class="text-primary text-center">
<?php echo $_POST['radio-value'];?>
</h5>
</div>
</div>
//The image I want to change based on the radio value:
<div class="container pb-5">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center rounded shadow-sm">
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/Macro-split.png">
</div>
</div>
</div>
</div>
<!-- save values and send to next pages -->
<input type="hidden" id="radio-value" name="radio-value" value="<?php echo $_POST['radio-value']?>" />
I hope you can guide me in the right direction as I am now on the basics of understanding Javascript.
Thank you in advance!
Assuming your value is coming through in $_POST['radio-value'] the basic way to do this would be with an if statement to check if one of the 3 values is set, and then set which image that value corrresponds to:
//The image I want to change based on the radio value:
<?php
$image = 'default.png';
if (isset($_POST['radio-value'])) {
if ($_POST['radio-value'] == 'value for image 1') {
$image = 'value1image.png';
} else if ($_POST['radio-value'] == 'value for image 2') {
$image = 'value2image.png';
} else if ($_POST['radio-value'] == 'value for image 3') {
$image = 'value3image.png';
}
}
?>
Then in your image src:
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/<?php echo $image;?>">
I'm still new in coding. I hope I can get a kind response from you.
Please bear with me :) thanks
Anws,
I tried to display the value of these radio buttons but still it won't display.
May I know on how can I get the value of .custom-control-input when I choose a radio button using javascript?
May I know where I did it wrong?
PS: I didn't add the css here yet, what just I need is to display the value of these radio buttons.
function otcContinue_onClick() {
var tac = document.getElementsByClassName('custom-control-input');
if (tac.checked) {
if ($("input[name=exampleRadios]:checked").val()) {
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
} else {
$('#errorMsg').text("Please select preferred payment option.");
$('#modalError').modal('show');
}
}
}
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>
I have change your JS so when you click on an input you get the returned value it has. In this case - otc_sm.
$("input[name=exampleRadios]").on('click', function() {
console.log($(this).val());
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>