How to hide/show <div> using JavaScript in Struts 2 with Tiles?

I'm working on a JSP site that uses Struts 2 and Tiles 3, it has different tabs and each tab shows a <div> with a table. I need to add a tab that has 2 tables, and alternatively show one or the other depending on buttons.

Is it possible to show/hide them through JS somehow? I've been trying for a while now, and Tiles does not seem to care to what I do from JS.

I've been using this, with some variations, but so far no luck. I'm kinda new to JS, so I may be doing something wrong, or maybe Tiles has a way to hide/show stuff dynamically/during runtime that I do not know.

document.getElementById('controlPools').style.display='none';
document.getElementById('controlPools').style.display='inline';

controlPools is the name of the div, the name of the tile that contains it is controlPool.

This is the code of the JSP page

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<body>

    <fieldset>
    
        <div id="controlPools">
            <display:table name="lstPools" class="displaytag" id="tablaPools" >
                                                                   
                <display:column style="width: 90%"     >
                    <a href="javascript:getNodosPool('${tablaPools.name}')" >${tablaPools.name}</a>
                </display:column>
                
                <display:column style="width: 10%" property="nodes"/>

            </display:table>
        </div>
        
        <div id="nodosPool" style="display: none;" >
            <display:table name="lstMembers" class="displaytag" id="tablaNodesPool">
                
                <display:column style="width: 5%" >
                            <input type="checkbox" id="${tablaNodesPool.name}"  class="node" value="${tablaNodesPool.name}"  style="margin: 0 0 0 4px"   />             
                         </display:column>  
                         <display:column title="Status CBS" style="width: 10%"> 
                            <div id="iconStatus"  class="${tablaNodesPool.classStatus}" /></div> 
                         </display:column>
                         
                         <display:column title="Status STF" style="width: 10%"> 
                            <div id="iconStatus"  class="${tablaNodesPool.classStatus2}" /></div> 
                         </display:column>
                                                                     
                         <display:column property="name"    />
                         <display:column property="ip"    />
                         <display:column property="description"   />

            </display:table>
            
            <button onclick="enableNodesPool();"  ><s:text name="controlSnmp.enableSelected"/></button>     
            <button onclick="disableNodesPool();" ><s:text name="controlSnmp.disableSelected"/></button>
            <button onclick="getNodosPool();"><s:text name="controlSnmp.buttonRefresh"/></button>
        </div>
        

    </fieldset>
</body>

<script>
  
</script>

Solution

@Roman-C answer got me thinking, and it led me to the solution to the problem, it was partly because of tiles.

I was using this JS block to feed the data to my JSP:

document.getElementById('controlPools').style.display='none';
$.ajax({
        type : "GET",
        url  : "ControlNodesPoolAct.action",
        data : {"pool": pool},
        success : function(result){
          if (result != null && result.length > 0){
            var aux = $("#tabs-11"); 
            aux.html(result);
            //inicializamos la tabla con el plugin de jquery
            $('#tablaNodesPool').DataTable(
                    {
                        "lengthMenu": [[150, 75, 10, -1], [150, 75, 10, "All"]]         
                    }           
            );
            spinner.stop();
            document.getElementById('poolLegend').innerHTML=pool;
          }
        },
        error : function(xhr, errmsg) {
            console.log("error en funcion getMiembrosSnmp " + errmsg); 
            spinner.stop();
        }
    });

and apparently since DisplayTags was rendering it during runtime, the div did not exist at the moment the funcion was called, so I needed to wait until DisplayTags rendered the table for the div to exist. I moved the document.getElementById('controlPools').style.display='none'; to a point where I knew the table was rendered and it seemed to fix the problem.

This change fixed it:

$.ajax({
        type : "GET",
        url  : "ControlNodesPoolAct.action",
        data : {"pool": pool},
        success : function(result){
          if (result != null && result.length > 0){
            var aux = $("#tabs-11"); 
            aux.html(result);
            //inicializamos la tabla con el plugin de jquery
            $('#tablaNodesPool').DataTable(
                    {
                        "lengthMenu": [[150, 75, 10, -1], [150, 75, 10, "All"]]         
                    }           
            );
            spinner.stop();
            document.getElementById('controlPools').style.display='none';
            document.getElementById('poolLegend').innerHTML=pool;
          }
        },
        error : function(xhr, errmsg) {
            console.log("error en funcion getMiembrosSnmp " + errmsg); 
            spinner.stop();
        }
    });