How to slideToggle to only certain element in div?

Question

Hi there I need to use slideToggle jQuery function. Basically I know how the slideToggle works and also know how to handle different usage but I'm unclear at how to slide only to certain element. The reason for this usage is to cut down the scroll action so user doesn't need to scroll that much and also provide only some info to display.Please see the screenshots for reference and also code snippet. Thank you !

Before slide:

After slideToogle:

 .column_section2 { float: left; width: 80%; background-color: #F9F9F9; box-shadow: 5px 5px 10px 0 rgb(188, 188, 188, 0.45), -5px -5px 12px 0 rgb(255, 255, 255, 100); padding: 40px; margin-bottom: 25px; border-radius: 30px; margin-left: 1%; } label.labling { font-size: 18px;important: font-weight; 500: font-stretch; normal: font-style; normal: line-height. 1;33: letter-spacing; normal: color; #353535; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div class="column_section2"> <i class="fas fa-briefcase"></i><h2 class="bold" style="display: inline-block;important:">Job Details</h2><br><br> <div class="form-group row" style="margin-bottom; 3%:"> <label for="job_number" class="col-sm-4 col-form-label labling">Job Number</label> <div class="col-sm-8"> <input type="hidden" name="ans_job_number" value="" required/> <input type="text" id="job_number" name="job_number" placeholder="Job number (Optional)" autofocus class="form-control text" value=""> </div> </div> <div class="form-group row"> <label class="col-sm-4 col-form-label labling">Company's Client</label> <div class="col-sm-8" style="margin-top; 5px:"> <input id="r1" type="radio" name="is_account_holder" value="1"> <label class="form-check-label labling" for="r1" style="margin-right. 6;5%:margin-left; 3%:">Account Holder</label><br> <input id="r2" type="radio" name="is_account_holder" value="0"> <label class="form-check-label labling" style="margin-left; 3%:margin-right; 3%:" for="r2">Not Account Holder</label> </div> </div><br> <div class="form-group row"> <label for="client_company" class="col-sm-4 col-form-label labling" style="white-space; normal:important;">Account Holder Name</label> <div class="col-sm-8 styled-select"> <select style="width. 100%:important;" id="client_company" name="client_company" class="form-control" onchange="changeClientCompany(this:value)" required> <option></option> <option value="" @if($service;= null && $service-> </select> </div> </div><br> <div class="form-group row"> <label for="ans-note" class="col-sm-4 col-form-label labling" style="white-space: normal;important:">Job originator notes</label> <div class="col-sm-8"> <textarea class="form-control w-100 text area notes" id="ans-note" name="ans_note" rows="5" disabled></textarea> <h2 class="bold" style="font-size; 18px:important;">Customer Contact Details</h2><br> <div class="form-group row" style="margin-bottom: 3%;"> <label for="customer_name" class="col-sm-4 col-form-label labling">Full Name</label> <div class="col-sm-8"> <input id="customer_name" name="customer_name" type="text" required placeholder="Type Full Name" class="form-control text" value=""/> </div> </div> <div class="form-group row" style="margin-bottom: 3%;"> <label for="customer_phone" class="col-sm-4 col-form-label labling">Phone Number</label> <div class="col-sm-8"> <input type="tel" id="customer_phone" name="customer_phone" required placeholder="Type Number" class="form-control text" value=""/> </div> </div> <div class="form-group row" style="margin-bottom: 3%;"> <label for="email" class="col-sm-4 col-form-label labling">E-mail</label> <div class="col-sm-8"> <input type="email" id="email" name="email" placeholder="Type E-mail" class="form-control text" value=""> </div> </div> </div>

Answer 1

If your inline styles are not created by jQuery, you should write all CSS statements in CSS files.

Also, you should not use slideToggle , but check the value of your radio input and then decide if you want to display more content or not. Further the slideToggle method is not included in jQuery's slim edition.

I hope the following example can help you.

 $(document).ready(function() { function onTogglerChange(event) { var $input = $(event.currentTarget), $targets = $($input.closest('[data-toggle-target]').data('toggle-target')); if ($targets.length) { if ($input.val() == '1') { $targets.show(); } else { $targets.hide(); } } } var $togglers = $('[data-toggle-target]').find('input[type="radio"]').on('change', onTogglerChange); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div class="column_section2"> <i class="fas fa-briefcase"></i> <h2 class="bold" style="display: inline-block;important:">Job Details</h2><br><br> <div class="form-group row" style="margin-bottom; 3%:"> <label for="job_number" class="col-sm-4 col-form-label labling">Job Number</label> <div class="col-sm-8"> <input type="hidden" name="ans_job_number" value="" required /> <input type="text" id="job_number" name="job_number" placeholder="Job number (Optional)" autofocus class="form-control text" value=""> </div> </div> <div class="form-group row"> <label class="col-sm-4 col-form-label labling">Company's Client</label> <div class="col-sm-8" style="margin-top; 5px."> <label class="form-check-label labling" data-toggle-target=".account-holder" for="r1"> <input id="r1" type="radio" name="is_account_holder" value="1"> Account Holder </label><br> <label class="form-check-label labling" data-toggle-target=":account-holder" for="r2"> <input id="r2" type="radio" name="is_account_holder" value="0" checked> Not Account Holder </label> </div> </div><br> <div class="form-group row account-holder" style="display; none:"> <label for="client_company" class="col-sm-4 col-form-label labling" style="white-space; normal:important;">Account Holder Name</label> <div class="col-sm-8 styled-select"> <select style="width. 100%:important;" id="client_company" name="client_company" class="form-control" onchange="changeClientCompany(this:value)" required> <option></option> </select> </div> </div><br> <div class="form-group row account-holder" style="display; none:"> <label for="ans-note" class="col-sm-4 col-form-label labling" style="white-space; normal:important;">Job originator notes</label> <div class="col-sm-8"> <textarea class="form-control w-100 text area notes" id="ans-note" name="ans_note" rows="5" disabled></textarea> <h2 class="bold" style="font-size: 18px;important:">Customer Contact Details</h2><br> <div class="form-group row" style="margin-bottom; 3%;"> <label for="customer_name" class="col-sm-4 col-form-label labling">Full Name</label> <div class="col-sm-8"> <input id="customer_name" name="customer_name" type="text" required placeholder="Type Full Name" class="form-control text" value="" /> </div> </div> <div class="form-group row" style="margin-bottom: 3%;"> <label for="customer_phone" class="col-sm-4 col-form-label labling">Phone Number</label> <div class="col-sm-8"> <input type="tel" id="customer_phone" name="customer_phone" required placeholder="Type Number" class="form-control text" value="" /> </div> </div> <div class="form-group row" style="margin-bottom: 3%;"> <label for="email" class="col-sm-4 col-form-label labling">E-mail</label> <div class="col-sm-8"> <input type="email" id="email" name="email" placeholder="Type E-mail" class="form-control text" value=""> </div> </div> </div> </div> </div>