hide and show Div on click

Question

I have three div's, when user clicks on "1", div1 with id divOne12 should be displayed, when user clicks on 2 div2 with id divTwo12 should be displayed and div1 should be hidden, when user clicks 3 div3 with id divThree12 should be displayed and previous shown div should be hidden. Again if user clicks Div2 previous shown div should be hidden and div2 with id divTwo12 should be displayed.

Please find the fiddle :http://jsfiddle.net/0p7djjnc/7/ . Please suggest javascript changes.Thanks.

HTML code:

  <table>
  <tr>
  <td>
  <table>
  <tr>
     <td>
     <div id="divOne12">
     <div> 
     <table border="1">
    <tr><th>Column1</th><th>Column2</th></tr>
    <tr> 
    <td> Col1- data1 
    </td>
    <td> Col2 - data1
    </td>
    </tr>
    <tr> 
    <td> col1 - data2 
      </td>
      <td> col2 - data2
      </td>
    </tr>
  <tr> 
    <td> col3 - data3 
      </td>
      <td> col3 - data3
      </td>
    </tr>   
  </table></div> </div><div id="divTwo12">Div 2</div>
      <div id="divThree12">Div 3</div>
      </td></tr>
    <tr>
    <td>
    <table width="170px" border="1">
        <tr>
        <td>
    Static Row
         </td>
            <td id="one12" class="navigateTest" onclick="navigate()"><b>1</b></td>
            <td id="two12" class="navigateTest" onclick="navigate()"><b>2</b></td>
            <td id="three12" class="navigateTest" onclick="navigate()"><b>3</b></td>
        </tr>
        </table>
       </td></tr>

       </table>
       </td></tr>
        </table>

Css code to hide div's:

#divTwo12{
  display: none;
}
#divThree12 {
  display: none;
}

--EDIT-- DIV id are dynamic in my application, how can i retrieve dynamic div id in javascript function, please suggest.

Use more meaningful ids. No paragraph should be as confusing as your first one. — mbomb007, Jan 06 '15 at 16:42
This link can be useful for your question. Thwe question is vwery much similar... http://stackoverflow.com/questions/26546885/how-to-display-different-input-type-depending-on-selected-option-from-a-drop-dow — Bashabi, Jan 06 '15 at 17:14

score 2 · Answer 1 · answered Jan 06 '15 at 16:39

2

$(document).ready(function(){

  $('#divOne12').hide();
  $('#divTwo12').hide();
  $('#divThree12').hide();

  $('#div1').click(function(){
       $('#divOne12').show();
       $('#divTwo12').hide();
       $('#divThree12').hide(); 
  });

  $('#div2').click(function(){
       $('#divOne12').hide();
       $('#divTwo12').show();
       $('#divThree12').hide(); 
  });

  $('#div3').click(function(){
       $('#divOne12').hide();
       $('#divTwo12').hide();
       $('#divThree12').show(); 
  });
});

answered Jan 06 '15 at 16:39

jay.jivani

1,560
1
16
33

In my case div id are dynamic, how can i get dynamic div id in javascript ? – user222 Jan 06 '15 at 16:42
1

for dynamic ID `$('.navigateTest').click(function(){ var div_id = $('#'+$(this).attr('id')); alert(div_id); });` – jay.jivani Jan 06 '15 at 16:48

score 2 · Accepted Answer · answered Jan 06 '15 at 16:47

Maybe you could use some data attribute:

<td id="one12" class="navigateTest" data-target="divOne12"><b>1</b></td>
<td id="two12" class="navigateTest" data-target="divTwo12"><b>2</b></td>
<td id="three12" class="navigateTest" data-target="divThree12"><b>3</b></td>

$(function () {
    $('.navigateTest').click(function () {
        var t = $(this).data('target');
        $('#'+t).show().siblings('div').hide();
    });
});

UpdatedFiddle

Lal · Answer 3 · 2015-01-06T16:50:10.397

See Updated Fiddle here

Works for dynamic divs

HTML

<img id="img1" data-id="div1"/>
<img id="img2" data-id="div2"/>
<img id="img3" data-id="div3"/>
<img id="img4" data-id="div4"/>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

JQUERY

 $("#img1").on('click', function() {
   $("div").hide();
   $('#'+$(this).data('id')).show();
});

Simply replace show / hide with what you want to show or hide when the img is clicked.

score 0 · Answer 4 · answered Jan 06 '15 at 17:03

HTML:

<table>
  <tr>
  <td>
  <table>
  <tr>
     <td>
     <div id="divone12">
     <div> 
     <table border="1">
    <tr><th>Column1</th><th>Column2</th></tr>
    <tr> 
    <td> Col1- data1 
    </td>
    <td> Col2 - data1
    </td>
    </tr>
    <tr> 
    <td> col1 - data2 
      </td>
      <td> col2 - data2
      </td>
    </tr>
  <tr> 
    <td> col3 - data3 
      </td>
      <td> col3 - data3
      </td>
    </tr>   
  </table></div> </div><div id="divtwo12">Div 2</div>
      <div id="divthree12">Div 3</div>
      </td></tr>
    <tr>
    <td>
    <table width="170px" border="1">
        <tr>
        <td>
    Static Row
         </td>
            <td id="one12" class="navigateTest" onclick="navigate()"><b>1</b></td>
            <td id="two12" class="navigateTest" onclick="navigate()"><b>2</b></td>
            <td id="three12" class="navigateTest" onclick="navigate()"><b>3</b></td>
        </tr>
        </table>
       </td></tr>

       </table>
       </td></tr>
        </table>

JQUERY:

$(function(){ 
     $('.navigateTest').click(function(){
         $("div[id^='div']").hide();
         var id=$(this).attr('id');
         var divId='div'+id;
         $('#'+divId).show();

             });
    });

CSS:

#divtwo12{
  display: none;
}
#divthree12 {
  display: none;
}

hide and show Div on click

4 Answers4

UpdatedFiddle

See Updated Fiddle here