Hide and show the tables in html using jquery/ javascript -
Hide and show the tables in html using jquery/ javascript -
i learning design web. problem there 2 combo box instrument compose of acoustic guitar,drum , piano, , level compose of mainstream, primary , beginner etc.
if click combo box table named create own schedule appear when click example:the instrument(piano) or level(beginner) disappear. every click on combo box show or hide.. want if click combo box , take instrument piano , level begginer that's time table appear/ display
please help: below i've done
<!doctype html> <html lang="en"> <script> function toggle() { if( document.getelementbyid("hidethis").style.display=='none' ){ document.getelementbyid("hidethis").style.display = 'table-row'; // set table-row instead of empty string }else{ document.getelementbyid("hidethis").style.display = 'none'; } } </script> <section id="download-bootstrap"> <div class="page-header"> <h1>1. create schedule</h1> </div> <div class="well well-large"> <p class="lead">select instrument , level</p> <div class="controls controls-row"> <tr> <td>instrument</td> <td> <select class="form-control" id="colorselector" name="activity" onclick="toggle();"> <option selected="selected" onclick="toggle();" >-- select --</option> <option value="1">acoustic guitar</option> <option value="2">drum</option> <option value="3">piano</option> </select> </td> <td> level</td> <td> <select class="form-control" id="colorselector" name="activity" onclick="toggle();"> <option selected="selected" >-- select --</option> <option value="4">mainstream</option> <option value="5">beginner</option> <option value="6">primary a</option> <option value="7">intermediate a</option> <option value="8">intermediate b</option> </select> </td> </tr> </div> </div> <br /><br /> <div id="hidethis" style="display: none;"> <p>create own schedule</p> <table class="table table-bordered table-striped responsive-utilities"> <thead> <tr> <th></th> <th>sunday</th> <th>monday</th> <th>tuesday</th> <th>wednesday</th> <th>thursday </th> <th>friday</th> <th>saturday</th> </tr> </thead> <tbody> <tr> <th>7:30-8:30</th> <td class="is-visible" style="background-color: #f9f9f9 !important">reserved</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>8:30-9:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>7:30-8:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>7:30-8:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>7:30-8:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>7:30-8:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>7:30-8:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>7:30-8:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>7:30-8:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> <tr> <th>7:30-8:30</th> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> <td class="is-visible">available</td> </tr> </tbody> </table> </div> </body> </html>
you can set check on alter event of both dropdowns phone call function, create check below
html:
-- select -- acoustic guitar drum piano
<select class="form-control" id="level" name="level" onchange="toggle();"> <option selected="selected" >-- select --</option> <option value="4">mainstream</option> <option value="5">beginner</option> <option value="6">primary a</option> <option value="7">intermediate a</option> <option value="8">intermediate b</option> </select> js :
function toggle(){ if(jquery('#activity').val == 'piano' && jquery('#level').val == 'beginner'){ jquery('#idtable').css('display','block') } } have used jquery u can include adding below line in script in head.
javascript jquery html css
Comments
Post a Comment