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;">
$(":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.
$(':hidden').parent().hide();
should work: http://jsfiddle.net/UtGM3/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With