Real Time Jquery Editor

KW Online Tools Zone

Knowledge Walls

View All Tools Home

HIDE OR SHOW DIV DATA IN JQUERY

[Jquery editor]

Run

Share Link

Clear

HTML [Ctrl+Enter] - to run

<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>

CSS [Ctrl+Enter] - to run

Jquery [Ctrl+Enter] - to run

OUTPUT