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

http://jsfiddle.net/a3mkg/63/

<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

Popular posts from this blog

java - Could not locate OpenAL library -

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

sorting - opencl Bitonic sort with 64 bits keys -