How to add style: inline-block while a ul being toggled on without changing Javascript?

Question

I have a list with header and toggle. Currently when the ul being toggled on, the style is display: block; when being toggled off, the style is display: none. Here is a snippet:

function toggle () {

  var toggleClosed = $(".toggle-closed");
  var toggleOpened = $(".toggle-opened");

  if (!$(toggleClosed).is(":visible")) {
    $(toggleClosed).show();
    $(toggleOpened).hide();
  } else {
    $(toggleClosed).hide();
    $(toggleOpened).show();
  }
}

.form-row-filter {
  background-color: grey;
}
.toggle-opened {
    cursor: pointer;
    display: block;
}
.toggle-closed {
    cursor: pointer;
    display: none;
}
.material-icons {
  margin-right: -4px;
  margin-left: 4px;
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="material-icons toggle-opened" onclick="toggle()">&#x25BA; Companies</div>
    <div class="material-icons toggle-closed" onclick="toggle()">&#x25BC; Companies</div>
    <ul class="form-row-filter toggle-closed">
      <li>
        company a
      </li>
      <li>
        company b
      </li>
    </ul>
</div>

How can I do this: when ul being toggled off, style is still display: none; but when toggled on, make the style of ul be display: inline-block? Notice I do NOT want to change the Javascript, cause I don't want to break stuff elsewhere by changing every toggle-on to display: inline-block.

EDIT: the toggle-closed class should be applied on the ul element, rather than the li element. I've modified the snippet to correct this.

I don't see how you can achieve what you want without touching the javascript. — designtocode, Aug 06 '19 at 12:52

Temani Afif · Accepted Answer · 2019-08-06T13:09:16.407

1

A hacky way (that I don't recommend) is to consider a selector based on the style in order to force the display:

ul[style="display: block;"] {
 display:inline-block!important;
}

Full code

function toggle () {

  var toggleClosed = $(".toggle-closed");
  var toggleOpened = $(".toggle-opened");

  if (!$(toggleClosed).is(":visible")) {
    $(toggleClosed).show();
    $(toggleOpened).hide();
  } else {
    $(toggleClosed).hide();
    $(toggleOpened).show();
  }
}

.form-row-filter {
  background-color: grey;
}
.toggle-opened {
    cursor: pointer;
    display: block;
}
.toggle-closed {
    cursor: pointer;
    display: none;
}
.material-icons {
  margin-right: -4px;
  margin-left: 4px;
  vertical-align: middle;
}

ul[style="display: block;"].custom-class {
 display:inline-block!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="material-icons toggle-opened" onclick="toggle()">&#x25BA; Companies</div>
    <div class="material-icons toggle-closed" onclick="toggle()">&#x25BC; Companies</div>
    <ul class="form-row-filter toggle-closed custom-class">
      <li >
        company a
      </li>
      <li >
        company b
      </li>
    </ul>
</div>

edited Aug 06 '19 at 13:09

answered Aug 06 '19 at 12:59

Temani Afif

245,468
26
309
415

This means all `ul` with `style="display:block;"` will be changed to `display:inline-block;`? Sounds pretty risky as this will affect other pages where this style is applied? – one-hand-octopus Aug 06 '19 at 13:05
@thinkvantagedu you can be more specific and add a class `ul[style="display: block;"].uniqueClass` – Temani Afif Aug 06 '19 at 13:07
What about this approach: add an empty class with a specific name: `.special-class { }`, apply this class to the `ul`, then refer to this class in Javascript such that the change will only apply to this `ul`? – one-hand-octopus Aug 06 '19 at 13:07
@thinkvantagedu it will make the CSS apply to only that UL, I made the selector more specific by using a class – Temani Afif Aug 06 '19 at 13:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197556/discussion-between-thinkvantagedu-and-temani-afif). – one-hand-octopus Aug 06 '19 at 13:17

score -1 · Answer 2 · answered Aug 06 '19 at 13:02

-1

You can use jQuery to add css instead of instead o calling show.

 $(toggleClosed).css('display', 'inline-block');

answered Aug 06 '19 at 13:02

BrianDiesel

168
5

How to add style: inline-block while a ul being toggled on without changing Javascript?

2 Answers2