hide and show Div on click


Tags: javascript,jquery,html,css

Problem :

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.



Solution :

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


    CSS Howto..

    How to make vertical text change into horizontal text in css?

    how to replace entire css text with another?

    How to change the navbar position? CSS & HTML

    How do I hide text that is not wrapped in

    or ?

    How to customized select element through css?

    How To Center a Letterpress Effect?

    Using bootstrap, how do you get columns to clear properly?

    How to design a web page with multiple color panes without tables [duplicate]

    How to align 3 divs with CSS retaining relative position while scaling window

    problem with internet explorer showing html input button which is hidden

    How to apply direction css attribute in list elements

    How to add multiple CSS classes to HTML node in Closure template (soy)?

    How to make the underlines the same size in all browsers with css?

    A really simple question: How to apply a style to an iframe whose parent tag's id is known?

    How to align text in CSS

    How to change background-color of selected option in IE11?

    How to have a css element with transitions except initially?

    How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

    Give a box an ID, once clicked shows alert of that ID?

    How to get CSS styling to shown on page? [closed]

    How to apply CSS correctly to iFrame?

    How do you make an input element fill parent?

    Bold text not showing on iPhone but displays fine on Android

    How to change css properties on hover parent element?

    how to align vertically a dynamic-height div inside another fixed height div

    How to make footer elements (image and label) centered?

    How to import a CSS file from an external bundle resource

    How to mark up a layout blocks with the CSS property “display:flex;”?

    how to position a div below an absolute div in css

    How to add a google map icon to this code?