Search range of html content by id using jquery

.When you click A-M button the html content filtered by jquery function shows only A-M starting Names content and the same for N-Z button when you click it, filtered by jquery function shows only N-Z starting Names content

Example html code for Range Filter

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
       <style>
        body {
            margin: 0px;
            padding: 0px
        }
        .container {
            height: auto;
            width: 400px;
        }
        .photo {
            height: 250px;
            width: 350px;
            margin: 5px 25px;
            border: 1px solid #000000;
        }
        .img {
            height: 250px;
            width: 150px;
            float: left;
        }
        img {
            height: 250px;
            width: 150px;
            float: left;
        }
        .content {
            height: 246px;
            width: 195px;
            float: left;
            padding: 2px 2px;
            background-color: #EEEEEE;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#button_1").click(function() {
                $(".container div.photo").hide();
                for ( var i = 65; i <= 77; i++) {
                    $(".container div#" + String.fromCharCode(i) + "").show();
                }
            });
            $("#button_2").click(function() {
                $(".container div.photo").hide();
                for ( var i = 77; i <= 90; i++) {
                    $(".container div#" + String.fromCharCode(i) + "").show();
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="photo" id="D">
            <div class="img">
                <img src="images/dhoni.jpg">
            </div>
            <div class="content">
                <b> Name: </b> Dhoni <br> <br> <b> Phone Number: </b>
                7411690201
            </div>
        </div>
        <div class="photo" id="Y">
            <div class="img">
                <img src="images/yuvraj.jpg">
            </div>
            <div class="content">
                <b> Name: </b> Yuvraj <br> <br> <b> Phone Number: </b>
                7411256901
            </div>
        </div>
        <div class="photo" id="B">
            <div class="img">
                <img src="images/bravo.jpg">
            </div>
            <div class="content">
                <b> Name: </b> Bravo <br> <br> <b> Phone Number: </b>
                7411636541
            </div>
        </div>
        <div class="photo" id="S">
            <div class="img">
                <img src="images/singh.jpg">
            </div>
            <div class="content">
                <b> Name: </b> Singh <br> <br> <b> Phone Number: </b>
                7425630201
            </div>
        </div>
        <div class="photo" id="D">
            <div class="img">
                <img src="images/dravid.jpg">
            </div>
            <div class="content">
                <b> Name: </b> Dravid <br> <br> <b> Phone Number: </b>
                7258690201
            </div>
        </div>
        <div class="photo" id="G">
            <div class="img">
                <img src="images/gautam.jpg">
            </div>
            <div class="content">
                <b> Name: </b> Gautam <br> <br> <b> Phone Number: </b>
                7258690201
            </div>
        </div>
        <div id="buttons" style="padding: 5px 150px;">
            <button id="button_1">A-M</button>
            <button id="button_2">N-Z</button>
        </div>
    </div>
</body>
</html>

Example Demo

[Click here to see Demo]

Next Topics

Next lessons of current book.

Photo slider with jquery example

Components of JQuery Examples

Using slide function with + and - sign .

Components of JQuery Examples

Using slide function with down and right arrows

Components of JQuery Examples

How to get url of current page in jquery

Jquery Syntax of JQuery Examples