CODEWITHSUNDEEP
jquerycssdatatables
super cool
super cool

Reputation: 6045

Hide/show div inside div ? Typical one

My code :

    <div id="myDataTable_wrapper" class="dataTables_wrapper" role="grid">

    <div class="DTTT_container ui-buttonset ui-buttonset-multi" style="position: relative;">

    <button class="DTTT_button DTTT_button_copy ui-button ui-state-default"id="ToolTables_myDataTable_0">
    <span>Copy</span></button>
    <button class="DTTT_button DTTT_button_csv ui-button ui-state-default" id="ToolTables_myDataTable_1">
<span>CSV</span></button>
    <button class="DTTT_button DTTT_button_xls ui-button ui-state-default" id="ToolTables_myDataTable_2">
<span>Excel</span></button>
    <button class="DTTT_button DTTT_button_pdf ui-button ui-state-default" id="ToolTables_myDataTable_3">
<span>PDF</span></button>
    <button class="DTTT_button DTTT_button_print ui-button ui-statedefault"id="ToolTables_myDataTable_4">
<span>Print</span></button>  
    </div>
//here all my datatable html code comes .....
    </div>

I got this code from Google chrome inspect element. Above you can find parent DIV with id where as under that other DIV present with no id. I am amateur in jquery and i am planning to hide the child DIV inside the main DIV just for simple requirement to make it visible when i click on some button blah blah i can work on it?

How to hide it ? 

#myDataTable_wrapper // but i want child div which have no ID whatsoever 
{
display:none;
}

EDIT : Well after hiding the DIV present under Parent DIV . When i call the Child DIV based on button click like below the entire DIV content hidden initially should come insde of a POPUP or under menu or in any other place not the previous location .

 $('#sss').click(function () {
            alert("ss");

$('#myDataTable_wrapper DTTT_container').dialog(//Hidden Div fetching logic inside should be written here  );
           //need to do something ,i am missing something
        });

Regards & sorry for making things complex to understand

Upvotes: 0

Views: 241

Answers (2)

Emrys Myrooin
Emrys Myrooin

Reputation: 2231

You can take your div like this in javascript :

var divWithId = document.getElementById("myDataTable_wrapper");

And then you can take all div in the previous one like this :

var divs = divWithId.getElementsByTagname("div") //an array of div

In your case you hide/show your div like this :

function showHide()
{
    var divWithId = document.getElementById("myDataTable_wrapper");
    var divs = divWithId.getElementsByTagname("div") //an array of div
    var myDiv = divs[0];

    if(myDiv.style.display == "none")
        myDiv.style.display = "block";
    else
        myDiv.style.display = "none";

}

You call this function to change the state of your div. If the div is hiden, the function will shows it. If the div is shown, the function will hides it.

Upvotes: 2

Maximc
Maximc

Reputation: 1762

#myDataTable_wrapper > div
{
display:none;
}

Upvotes: 2

Related Questions