JSFiddle - React, Tailwind, and code Playground

by ravi1989

HTML

<div data-role="page" id="realTimeScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
             
                <h1 class="ui-title"  id="" style="text-align:left;margin-left: 100px;">Document name</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    
                  <a href="" data-role="button" data-transition="none" data-inline="true" data-theme="b" data-rel="popup"id="openclose_h" data-position-to="window">Openclose</a>
                </div>
            </div>

             <div class="ui-grid-c" style="display: none" id="searchContend_h">
  <div class="ui-block-a">
    <input name="text-12" id="text-12" value="" type="text"  class="textSearchvalue_h">     
  </div>
  <div class="ui-block-b">
    <a href="#" data-role="button" data-corners="false"  data-inline="true" class="searchButtonClickText_h" >Search</a>
  </div>
  <div class="ui-block-c">
    <a href="#" data-role="button" data-corners="false"  data-inline="true" class="next_h">Next</a>
  </div>
  <div class="ui-block-d">
    <a href="#" data-role="button" data-corners="false" data-inline="true" class="previous_h">Previous</a>
   </div>
   <div class="ui-block-e">
    <a href="#" data-role="button" data-corners="false" data-inline="true" class="close_h">close</a>
   </div>
</div>
                        <div data-role="fieldcontain">
   
   <input type="range" name="slider-2" id="slider-2" value="15" min="15" max="25"  />
</div>

     <div data-role="content" data-theme="d">
                        
       
                <div...

JavaScript

$(document).on('click', '#openclose_h', function() {
   $("#searchContend_h").show("slow");
});

$(document).on('click', '.close_h', function() {
   $("#searchContend_h").hide("slow");
});