TimesCoding

Learn, Practice, and Excel with our Coding Tutorials!

Creating a Mobile Number Show-Hide Feature with HTML, CSS, and PHP

December 24, 2023 2 Min read CSS PHP

In today’s web development landscape, creating a user-friendly and secure user interface is crucial. One common requirement is the need to display sensitive information, such as a mobile number, while still providing users with the option to reveal more details if they choose to. In this tutorial, we’ll explore how to implement a mobile number show-hide feature using HTML, CSS, and PHP.

The Goal

Our objective is to create a web page that initially displays a partially hidden mobile number. When users click on the displayed number, it should toggle between the partial and full mobile number. This functionality provides a balance between user privacy and information accessibility.

Setting Up the HTML Structure

Let’s start with the basic HTML structure. Open your favorite text editor and create an HTML file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Add some basic styling */
        #mobileNumber {
            cursor: pointer;
            font-size: 2em;
            font-weight: bold;
            color: #3498db; /* Blue color */
            text-decoration: underline;
        }
    </style>
    <title>Mobile Number Show-Hide Example</title>
</head>
<body>

<?php
// Mobile number variable
$fullMobileNumber = '+123-456-7890';
?>

<div id="mobileNumber">
    Mobile Number: <span id="partialMobileNumber"><?php echo substr_replace($fullMobileNumber, 'XXXX', 7, 4); ?></span>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Get elements
        var mobileNumber = document.getElementById('mobileNumber');
        var partialMobileNumber = document.getElementById('partialMobileNumber');

        // Original full mobile number
        var fullMobileNumber = '<?php echo $fullMobileNumber; ?>';

        // Display partial mobile number initially
        mobileNumber.addEventListener('click', function () {
            // Toggle between showing partial and full mobile number on click
            if (partialMobileNumber.textContent === fullMobileNumber) {
                partialMobileNumber.textContent = '<?php echo substr_replace($fullMobileNumber, 'XXXX', 7, 4); ?>';
            } else {
                partialMobileNumber.textContent = fullMobileNumber;
            }
        });
    });
</script>

</body>
</html>

This code sets up the basic HTML structure, includes some styling for the mobile number display, and uses PHP to store and echo the full mobile number.

Related Post:
CSRF vs XSS: Key Differences and How to Prevent Attacks − For web security, CSRF (Cross-Site Request Forgery) and XSS (Cross-Site Scripting) both are potent vulnerabilities that can wreak havoc if exploited, but they are fundamentally.
How to Use PHP iconv() Function for Effective Character Encoding Conversion − The iconv() function in PHP is used for character set conversion. This function converts a string from one character encoding to another. It is particularly.
PHP Date and Time Functions Explained with Examples − PHP offers a variety of functions for working with dates and times. These functions allow you to: Here are some commonly used functions and examples:.
How to Use the PHP chr() Function with Examples − The chr() function in PHP is used to return a character from a specified ASCII value. ASCII (American Standard Code for Information Interchange) values range.
How to Use PHP chunk_split() Function for String Manipulation − PHP chunk_split() Function The chunk_split() function in PHP is used to split a string into smaller chunks and add a specified string (usually a separator).
How to Use the PHP chop() Function to Trim Strings Effectively − The chop() function in PHP is used to remove whitespace or other predefined characters from the right end of a string. It’s an alias for.
Trendy Website Color Combinations for 2024 − Here are some trending color combinations to consider for your website, including header, footer, sidebar, and content section colors with codes: 1. Balanced Brights: 2..
How to Share Session Variables Between PHP Files for Secure CSRF Token Handling − In this tutorial, we will learn how to share session variables between PHP files, specifically focusing on handling a CSRF (Cross-Site Request Forgery) token securely..
Create a Stylish Analog Watch with HTML, CSS, and JavaScript − Creating a stylish analog watch using HTML, CSS, and JavaScript involves simulating the appearance and movement of clock hands. We’ll build a simple analog clock.
How to Create a Stylish Digital Watch with HTML, CSS, and JavaScript − Creating a digital watch similar to an Apple Watch using HTML, CSS, and JavaScript involves several steps. We’ll build a simple, functional digital clock that.
Creating a Stylish and Responsive Bootstrap Menu with Colorful Toggle Icon − Below is a simple responsive Bootstrap 5 template that you can use as a starting point for your project. This template includes a stylish &.
PHP and MySQL Connection: MySQLi vs PDO Explained − Connecting PHP to MySQL is a common task in web development. Below are the steps to establish a connection using the MySQLi (MySQL Improved) extension.