Search code examples
jqueryif-statementshow-hideequality

Show and Hide element if statement JQuery


I am a professional new to JQuery and need assistance with showing and hiding an element.

Goal:

if the widget title = filter selection then show widget else hide

this is what I have:

if ($('widget-title',element) === ($('.uc-box-text'.title(),element){
    (i have no clue how to tell it to show just this widget with this title particular).show()
else
    (widget).hide()

when I try to test it nothing happens, I don't know how to tell it to that particular widget not just the title.

May you all help me with this?

the html is long but this is the code for the widget

<widget type="pivot" subtype="pivot" family="" widgetid="58e69a5730a1e50000001015" class="widget columnar" data-ng-class="{refreshing:widget.refreshing, hidden:layoutState.resizing ||  layoutCellState.resizing || layoutSubCellState.resizing,
 renderMode: dashboard.renderMode, 'has-breadcrumbs': widget.metadata.isDrilled()}" data-ng-controller="dashboard-layout.controllers.columnar.widget" columnar-widget="" data-ng-style="{height: widgetHeight}" dashboard-columnar-draggable="" data-ng-repeat="element in subcell.elements" style="position: relative; height: 121px;">

<widget-header style="width: 100%; background-color: rgb(84, 84, 84); border-left: 8px solid rgb(28, 145, 192);">

 <widget-title style="float: left; font-family: opensansregular; font-weight: normal; font-size: 16px; color: rgb(238, 238, 238); vertical-align: middle; text-align: left;" data-ng-hide="layoutState.minSizeReached" title="TEST" class="">TEST</widget-title> </div>

Solution

  • Can't give you an exact answer without seeing your HTML, but this should get you started:

    $(function() {
      $('.widget').each(function() {
        var widgetTitle = $('h2',this).text();
        if (widgetTitle === 'Widget One') {
          $(this).hide();
        }
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="widget">
      <h2>Widget One</h2>
      <p>This widget <strong>will not</strong> be shown</p>
    </div>
    
    <div class="widget">
      <h2>Widget Two</h2>
      <p>This widget <strong>will</strong> be shown</p>
    </div>