Using Materialize CSS within Laravel, and depending on certain situations I wanted to be able to disabled "Collapsible" elements, like you can easily with "Tabs" by adding the class of "disabled" should you need to, e.g:

<li @if(count($devices) == 0) class="tab col s4 disabled" @else class="tab col s4" @endif><a href="#mydevices">My Devices</a></li>

Tab Elements: MaterializeCSS Tabs

Collapsible Elements: MaterializeCSS Collapsible

But this doesn't work for collapsible elements. The workaround is just to hide the whole element but disabling shows the user what they potentially could get to where they to do more etc.

So this is the bit I'm trying to make disabled:

<div @if(count($devices) == 0) class="collapsible-header disabled" @else class="collapsible-header" @endif>My Devices</div>

Thoughts / Ideas appreciated :)

Using Materialize CSS within Laravel, and depending on certain situations I wanted to be able to disabled "Collapsible" elements, like you can easily with "Tabs" by adding the class of "disabled" should you need to, e.g:

<li @if(count($devices) == 0) class="tab col s4 disabled" @else class="tab col s4" @endif><a href="#mydevices">My Devices</a></li>

Tab Elements: MaterializeCSS Tabs

Collapsible Elements: MaterializeCSS Collapsible

But this doesn't work for collapsible elements. The workaround is just to hide the whole element but disabling shows the user what they potentially could get to where they to do more etc.

So this is the bit I'm trying to make disabled:

<div @if(count($devices) == 0) class="collapsible-header disabled" @else class="collapsible-header" @endif>My Devices</div>

Thoughts / Ideas appreciated :)

• javascript
• html
• materialize

Share Improve this question Follow asked Mar 25, 2016 at 13:50 WebTimWebTim 24766 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I'm not a "Laravel" guy but I can propose you the following solution for HTML/JS/CSS:

<ul class="collapsible" data-collapsible="accordion">
    <li class="disabled">
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
 </ul>

CSS:

.collapsible li.disabled .collapsible-body {
    display: none !important; /*or using id of the app to avoid the use of !important*/
}

.collapsible li.disabled .collapsible-header {
    background: rgb(221,221,221);
}