How to Show and Hide a Div Element with Radio Buttons in Laravel 10

Last Updated on by in Laravel

In this tutorial, we will explore how to hide and show an HTML element using a radio button in a Laravel application with the help of jQuery.

Laravel is a popular PHP web application framework that enables developers to build modern, robust, and scalable web applications efficiently. On the other hand, jQuery is a powerful JavaScript library that simplifies client-side scripting of HTML, making it easier to manipulate the DOM and handle user interactions.

Before we implement the functionality to show and hide a div element using jQuery in a Laravel application, let’s take a closer look at how radio buttons work. This understanding will help us effectively manage their behavior when toggling the element’s visibility.

Radio buttons play an important role in forms, allowing users to choose one option from a set of available choices. These graphical user interface (GUI) elements consist of a small circle (the radio button) and a label that describes the choice. The user automatically deselects other buttons in the same group when they select one radio button.

How to Show Hide Div in Laravel 10 using Radio Button and jQuery

  • Step 1: Install Laravel Framework
  • Step 2: Build Controller File
  • Step 3: Register New Route
  • Step 4: Create Blade View
  • Step 5: Test Laravel Application

Install Laravel Framework

To install the laravel framework on your development system, you have to consider the following requirements:

  • PHP >= 7.3
  • Composer (Dependency Manager for PHP)
  • MySQL or any other relational database

Next, you have to install the Composer on your system; if you still need to do it, you can download and install it from the official website: https://getcomposer.org/.

Then, open your terminal or command prompt and execute the following command to install Laravel:

composer create-project laravel/laravel --prefer-dist laravel-blog
cd laravel-blog

Build Controller File

Open your command line interface and navigate to your Laravel project directory.

Use the following command to create a new controller:

php artisan make:controller FormController

You have to update the given code into the app/Http/Controllers/FormController.php file.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Blade;
class FormController extends Controller
{
    public function index()
    {
        return view('home');
    }
}

Register New Route

Routes in Laravel help you create the URLs that your app will respond to; hence you have to open and add the given code into the routes/web.php file.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FormController;
/*
|--------------------------------------------------------------------------
| 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('/home', [FormController::class, 'index']);

Create Blade View

The blade is the default templating engine in Laravel; it offers a robust syntax for creating views in laravel.

Blade view file takes the simple, readable PHP code and quickly generates HTML code.

Put following code within the resources/views/home.blade.php file.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Tut</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
  
<div class="container mt-5">
      <h2 class="mb-3">Laravel jQuery Radio Button Div Hide Show Example</h2>
      <div class="mb-4">
        <div><input type="radio" name="type" value="userProfile" /> User Profile</div>
        <div><input type="radio" name="type" value="products" /> Products</div>
     </div>
      
      <div class="userProfile radioBtnChoose mb-3">
        <label>User Profile:</label>
        <input type="text" placeholder="Search user" />
      </div>
      <div class="products radioBtnChoose">
        <label>Products:</label>
        <input type="text" placeholder="Search product" />
      </div>
      <script>
        $(document).ready(function () {
          $('input[type="radio"]').click(function () {
            var inputValue = $(this).attr("value");
            var target = $("." + inputValue);
            $(".radioBtnChoose").not(target).hide();
            $(target).show();
          });
        });
      </script>
    
</div>
  
</body>
</html>

Includes necessary CSS and JavaScript files in the head, such as Bootstrap, Font Awesome, and jQuery.

Displays a container with a title and a set of radio buttons (“User Profile” and “Products”) for the user to choose between.

Contains two div elements (userProfile and products) with corresponding text input fields for searching users or products. These elements are initially hidden using inline CSS (display: none;).

Uses jQuery to hide all .radioBtnChoose elements when the page is loaded.

Listens for a click event on any radio button ($('input[type="radio"]').click).

When a radio button is clicked:

Retrieves the value of the selected radio button.

Finds the target div element with the class matching the radio button value (userProfile or products).

Hides all other .radioBtnChoose elements.

Shows the target

element based on the selected radio button’s value.

Overall, the code toggles the visibility of div elements based on the user’s radio button selection, allowing the user to interact with different sections of the page.

Test Laravel Application

We are going to start the Laravel development server:

Hence, run the following command to start the Laravel development server:

php artisan serve

Open your app using the following URL:

http://127.0.0.1:8000/home

Laravel jQuery Show Hide Div with Radio Button Tutorial

Age calculator tool

🎂✨ Discover your age in detail and with countdown to your next birthday with fun facts! 🎈🎉

Calculate your age now!
Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.