Replace an object by another object in the same frame in JavaScript?

Question

I have created a list with to options on the homepage (index.html). The problem I am encountering is that when I run the code; if the user clicks on "list_row1" then "table1" shows up (everything works great), and after this if the user clicks on "list_row2" then "table2" shows up 100-200px below table1 (everything does not work great). I want table1 to simply be replaced by table2 and vice-versa in the same spot by the list (list_row1 and list_row2) option the person clicks on.

For example, I want a red circle to be replace by a black circle and vice versa..

Here is my index.html with JavaScript code below:

 $(function(){ $('#list_row1').on('click',function(){ $('#table2').hide(); $('#table1').toggle(); }); $('#list_row2').on('click',function(){ $('#table1').hide(); $('#table2').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul class="list-group"> <div id = "list_row1"> <li class="list-group-item">Exhaust Temperature</li> </div> <div id = "list_row2"> <li class="list-group-item">Cylinder Pressure</li> </div> </ul> </div> <div id = "table1"></div> <div id = "table1"></div> 

Answer 1

Please check your code. you have two divs with same id

<div id = "table1"></div>
<div id = "table1"></div>

Answer 2

Your id is same for both the tables. this should be your code:-

<div>
  <ul class="list-group">
    <div id = "list_row1">
      <li class="list-group-item">Exhaust Temperature</li>
    </div>
    <div id = "list_row2">
      <li class="list-group-item">Cylinder Pressure</li>
    </div>
  </ul>
</div>

<div id = "table1">table1</div>
<div id = "table2">table2</div>
<script>
  $(function(){
    $('#list_row1').on('click',function(){
      $('#table2').hide();
      $('#table1').toggle();
    });

    $('#list_row2').on('click',function(){
      $('#table1').hide();
      $('#table2').toggle();
    });                     
  });
</script>

Answer 3

Hi its a typo both of your table have same id 'table1'. And also a small suggestion hide both the table divs at the load itself. I'm posting the new JavaScript code below have a look.

$(function(){
  $('#table2').hide();
  $('#table1').hide();
  $('#list_row1').on('click',function(){
    $('#table2').hide();
    $('#table1').toggle();
  });

  $('#list_row2').on('click',function(){
    $('#table1').hide();
    $('#table2').toggle();
  });                     
});

Answer 4

Here is an example of how you could toggle the two 'table' divs while also improving your markup: http://jsfiddle.net/8fr0484L/3/

Use <a> anchor tags inside your <li> list items instead of attempting to use divs. This will allow you to make use of the anchor tag's default clickable behaviour.

<ul class="list-group">
    <li class="list-group-item"><a href='#' id='list_row1'>Exhaust Temperature</a></li>
    <li class="list-group-item"><a href='#' id='list_row2'>Cylinder Pressure</a></li>
</ul>

In the code it might be worth hiding the 'table' divs in the beginning (on page load), assuming you don't know at that point what the user wants to view.

        // hide the tables by default when page loads
        $('#table1').hide();
        $('#table2').hide();

        $('#list_row1').on('click',function(event){
            event.preventDefault(); // halt the anchor tag's default behaviour
            $('#table2').hide();
            $('#table1').show();
        });

        $('#list_row2').on('click',function(event){
            event.preventDefault(); // halt the anchor tag's default behaviour
            $('#table1').hide();
            $('#table2').show();
        });                     

Answer 5

<ul class="list-group">
    <div id = "list_row1"><li class="list-group-item">Exhaust Temperature</li></div>
    <div id = "list_row2"><li class="list-group-item">Cylinder Pressure</li></div>
</ul>
</div>

<div id = "table1">abc</div>
<div id = "table2">pqr</div>

<script>
$(function(){
    $('#list_row1').on('click',function(){
        $('#table2').css({
            visibility : "hidden"
        }); 
        $('#table1').css({
            visibility : "visible"
        });
    });

    $('#list_row2').on('click',function(){
         $('#table1').css({
             visibility : "hidden"
         }); 
         $('#table2').css({
             visibility : "visible"
         });
    });                     
});
</script>