Laravel JQuery Show Hide Div with Radio Button Example

By Hardik Savani January 16, 2024 Category : Laravel

Hi Friends,

This article goes in detailed on laravel jquery radio button hide show div. I explained simply about laravel jquery show hide div with radio button. Here you will learn show hide div with radio button jquery laravel. I’m going to show you about laravel blade show hide div based on radio button.

In this example, we will create simple blade file with one form. form has radio button with "Fruits" and "Vegetables". if you select "Fruits" then it will show fruits list in div and it you selecr "Vegetables" then it will show vegetables list in div. so, let's follow the simple example:


Step 1: Install Laravel

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Route

In this is step we need to create some routes for google autocomplete address example view.



use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HomeController;



| Web Routes



| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!



Route::get('example', [HomeController::class, 'index']);

Step 3: Create Controller

in this step, we need to create HomeController and add following code on that file:



namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller



* Write code on Method


* @return response()


public function index(Request $request)


return view('example');



Step 4: Create Blade Files

here, we need to create blade file with form. so let's create one by one files:


<!DOCTYPE html>

<html lang="en">


<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Your Laravel App</title>

<link href="" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src=""></script>



<div class="container mt-5">

<h1>Laravel JQuery Radio Button Hide Show Div Example -</h1>


<strong>Choose Category:</strong>

<div class="form-group">

<input class="form-check-input" type="radio" value="1" id="option1" name="options">

<label class="form-check-label" for="option1">




<div class="form-group">

<input class="form-check-input" type="radio" value="2" id="option2" name="options">

<label class="form-check-label" for="option2">





<div id="option1Div" style="display: none;" class="mt-3">

<!-- Content for Option 1 -->

<strong>Fruits List: </strong>







<div id="option2Div" style="display: none;" class="mt-3">

<!-- Content for Option 2 -->

<strong>Vegetables List: </strong>









$(document).ready(function () {

$('input[name="options"]').change(function () {

var selectedOption = $('input[name="options"]:checked').val();

/* Hide all divs */

$('#option1Div, #option2Div').hide();

/* Show the selected div */

$('#option' + selectedOption + 'Div').show();






Now we are ready to run our example. so run bellow command so quick run:

php artisan serve

Now you can open bellow URL on your browser:


I hope it can help you...

Tags :