Collapsible POD listings in GFDL website are broken
Closed this issue · 6 comments
The collapsible sections on https://www.gfdl.noaa.gov/mdtf-diagnostics/ which describe current and planned PODs are broken: clicking on them has no effect.
All the information is still present in the page source, and no javascript errors are logged. I haven't modified the page in WordPress recently, which makes me suspect it's an issue caused by a WordPress upgrade, in which case this may not be fixable by editing the page's contents itself.
I haven't been able to find a fix by googling, e.g. downgrading to bootstrap 4.4.1/jQuery 3.4.1 as suggested here doesn't fix things.
As a tangentially related issue, I've always been worried that bootstrap's formatting of the collapsible elements didn't make it clear that you could click on them to expand them. Having explict right- and downward-facing triangles, like in most list view UIs, would help, but I couldn't figure out how to implement that feature.
Hmmm. Jquery recently had a vulnerability that was patched last month. I wonder if it is related.
Below is code for a test example of the webpage's 2-level table as it's currently implemented. On load it should display a table with two rows:
- Model Diagnostics Task Force
- Climate Sensitivity
which should be expandable by clicking. The fully expanded table is
- Model Diagnostics Task Force
- Atmosphere — Existing PODs
- Convective Transition Diagnostics
(description text 1.1.1 goes here)
- Convective Transition Diagnostics
- Atmosphere — In Progress
- ENSO-induced teleconnection
(description text 1.2.1 goes here)
- ENSO-induced teleconnection
- Atmosphere — Existing PODs
- Climate Sensitivity
- Atmosphere — Proposed
- Boundary layer cloud diagnostics
(description text 2.1.1 goes here)
- Boundary layer cloud diagnostics
- Atmosphere — Proposed
but only one of the sub-sub-tables will be displayed at any time (accordion UI pattern).
The code is the WordPress content only, i.e. it's the input that's served by the CMS framework and isn't a complete HTML document. Indentation (which isn't preserved by WordPress) is with two spaces, which might make things easier to navigate in a code editor.
2-level table example code
<div class="row">
<div class="col-lg-8">
<div class="post-border-bottom">
<h2>Current and Planned Diagnostics</h2>
<br>
<div id="listGroup" class="panel-group" role="tablist">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="listGroupCollapsed1">
<a href="#listGroup1" data-parent="#listGroup" class="collapsed" role="button" data-toggle="collapse">
<div class="panel-title">
<div class="pull-left"><h2 class="text-left">
Model Diagnostics Task Force
</h2></div>
<div class="clearfix"></div>
</div>
</a>
</div>
<div id="listGroup1" class="panel-collapse collapse" role="tabpanel">
<ul class="list-group">
<li class="list-group-item">
<div class="list-group-item-heading">
<div class="pull-left"><h3 class="text-left">
Atmosphere — Existing PODs
</h3></div>
<div class="clearfix"></div>
</div>
<ul class="list-group" id="listGroup1x1">
<li class="list-group-item list-group-item-info">
<a href="#listGroup1x1x1" data-parent="#listGroup1x1" class="collapsed" role="button" data-toggle="collapse">
<div class="list-group-item-heading">
<div class="pull-left"><h4 class="text-left">
Convective Transition Diagnostics
</h4></div>
<div class="clearfix"></div>
</div>
</a>
<p id="listGroup1x1x1" class="list-group-item-text collapse">
(description text 1.1.1 goes here)
</p>
</li>
</ul>
</li>
<li class="list-group-item">
<div class="list-group-item-heading">
<div class="pull-left"><h3 class="text-left">
Atmosphere — In Progress
</h3></div>
<div class="clearfix"></div>
</div>
<ul class="list-group" id="listGroup1x2">
<li class="list-group-item list-group-item-info">
<a href="#listGroup1x2x1" data-parent="#listGroup1x2" class="collapsed" role="button" data-toggle="collapse">
<div class="list-group-item-heading">
<div class="pull-left"><h4 class="text-left">
ENSO-induced teleconnection
</h4></div>
<div class="clearfix"></div>
</div>
</a>
<p id="listGroup1x2x1" class="list-group-item-text collapse">
(description text 1.2.1 goes here)
</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="listGroupCollapsed2">
<a href="#listGroup2" data-parent="#listGroup" class="collapsed" role="button" data-toggle="collapse">
<div class="panel-title">
<div class="pull-left"><h2 class="text-left">
Climate Sensitivity
</h2></div>
<div class="clearfix"></div>
</div>
</a>
</div>
<div id="listGroup2" class="panel-collapse collapse" role="tabpanel">
<ul class="list-group">
<li class="list-group-item">
<div class="list-group-item-heading">
<div class="pull-left"><h3 class="text-left">
Atmosphere — Proposed
</h3></div>
<div class="clearfix"></div>
</div>
<ul class="list-group" id="listGroup2x1">
<li class="list-group-item list-group-item-info">
<a href="#listGroup2x1x1" data-parent="#listGroup2x1" class="collapsed" role="button" data-toggle="collapse">
<div class="list-group-item-heading">
<div class="pull-left"><h4 class="text-left">
Boundary layer cloud diagnostics
</h4></div>
<div class="clearfix"></div>
</div>
</a>
<p id="listGroup2x1x1" class="list-group-item-text collapse">
(description text 2.1.1 goes here)
</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- WG Info Include -->
<div class="widget"></div>
<!-- end WG Include -->
</div>
</div>
Everything above is a false alarm -- it appears that the bug was introduced by edits to the page's content in WordPress that removed the tags needed for the collapse to work. A fixed version of the page has been published in the CMS, and this issue will be closed pending confirmation that the page is working correctly.
Good find, @tsjackson-noaa - thanks!
All sections are expanding and closing as expected. Thanks Tom.