html - How to show only one element ande hide other element using javascript? -
how show 1 element ande hide other element using javascript ?
when click on id="x_1"
want show id="ele-1"
element , hide other elements
and when click on id="x_2"
want show id="ele-2"
element , hide other elements
and when click on id="x_3"
want show id="ele-3"
element , hide other elements
and when click on id="x_4"
want show id="ele-4"
element , hide other elements
and when click on id="x_5"
want show id="ele-5"
element , hide other elements
and when click on id="x_6"
want show id="ele-6"
element , hide other elements
i don't know how ? thank you
<script> function showdiv(data) { $("#ele-"+!data).hide(); $("#ele-"+data).toggle(); } </script>
hi have created jsfiddle please have look. if need clarification please ping me. jsfiddle sample
.press { background: red; float: left; padding: 20px; margin-left: 20px; } .visibleclass { display: block !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="x_1" class="press" onclick="showdiv('1')">1</div> <div id="x_2" class="press" onclick="showdiv('2')">2</div> <div id="x_3" class="press" onclick="showdiv('3')">3</div> <div id="x_4" class="press" onclick="showdiv('4')">4</div> <div id="x_5" class="press" onclick="showdiv('5')">5</div> <div id="x_6" class="press" onclick="showdiv('6')">6</div> <br> <br> <br> <br> <div id="ele-1" style="display: none;">show data 1</div> <div id="ele-2" style="display: none;">show data 2</div> <div id="ele-3" style="display: none;">show data 3</div> <div id="ele-4" style="display: none;">show data 4</div> <div id="ele-5" style="display: none;">show data 5</div> <div id="ele-6" style="display: none;">show data 6</div> <script> function showdiv(data) { $("#ele-" + data).addclass('visibleclass'); hideelement(6, data); } function hideelement(total, active) { (i = 1; <= total; i++) { if (i != active) $("#ele-" + i).removeclass('visibleclass'); } } </script>
Comments
Post a Comment