Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide Parent Div if Child Table is hidden (display: none)

I've tried searching all over StackOverflow and Google and I've found ideas that I thought would work but nothing seems to help!

I'm working in SugarCRM Professional 6.5.5 and I'm trying to hide the parent div of a child table if the table is hidden (display: none) using jQuery but I'm not having much luck.

For example, in the code below I'm trying to hide <div id="detailpanel_5" class="detail view detail508 expanded"> because the child table <table id="LBL_EDITVIEW_PANEL6" class="panelContainer" cellspacing="0" style="overflow: hidden; height: 0px; display: none;"> is hidden.

I am able to successfully hide the parent div with $('#LBL_EDITVIEW_PANEL6').parent().hide(); however the problem is that there are a lot of tables hidden on each page, and the view is dynamic -- not every page will have the same tables hidden.

So what I want jQuery to do is go through the page after it is loaded and hide only the parent div of the child table that is hidden.

I've tried using something like: $(":hidden").parent().hide(); to search for any hidden elements but that hides the entire page (the screen is completely white). I've tried $("table:hidden").parent().hide(); but that doesn't seem to do anything.

Apologies if I left out any details that would be needed to help with an answer. I will be glad to offer any more info if it is needed. Hopefully it's something very small I am overlooking.

A small snippet of the HTML is below:

<div class="yui-content">
    <div id="tabcontent0">
        <div id="detailpanel_1" class="detail view detail508 ">
        <div id="detailpanel_2" class="detail view detail508 expanded">
        <div id="detailpanel_3" class="detail view detail508 expanded">
        <div id="detailpanel_4" class="detail view detail508 expanded">
            <h4>
            <table id="LBL_EDITVIEW_PANEL7" class="panelContainer" cellspacing="0">
            <script type="text/javascript">
        </div>
        <div id="detailpanel_5" class="detail view detail508 expanded">
            <h4>
            <table id="LBL_EDITVIEW_PANEL6" class="panelContainer" cellspacing="0" style="overflow: hidden; height: 0px; display: none;">
like image 201
Merrick Dennis Avatar asked Oct 07 '22 06:10

Merrick Dennis


2 Answers

$(":hidden") returns the <head>, <style>, <script> ,etc elements also. Their parent is the <html> document itself. So naturally $(":hidden").parent().hide(); will hide the entire document. Therefore you must be a bit more specific.

As told by @denisk $('table:hidden').parent().hide(); should work perfectly.

In the code you have shown, it didn't work probably because of the <h4> tags.

like image 145
Binayak Ghosh Avatar answered Oct 09 '22 17:10

Binayak Ghosh


$(':hidden').parent().hide();

should work: http://jsfiddle.net/UtGM3/

like image 39
Denis Kniazhev Avatar answered Oct 09 '22 16:10

Denis Kniazhev