CODEWITHSUNDEEP
javascriptjqueryhtmlcssmaterialize
nikhil024
nikhil024

Reputation: 479

Aligning Materialize CSS collapsible horizontally?

I am trying to change the default collapsible behavior in materialize css by aligning them horizontally. I have got partial success in it by using the below code :

<!DOCTYPE html>
<html>
<head>
  
  
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
  <link rel = "stylesheet"
  href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body >
<br><br><br><br>


  <ul style="display: inline" class="collapsible">
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
     <script>
 $(".collapsible").collapsible()
</script>   
</body>

</html>

But when I click the first collapsible-header, the other two collapsible headers drop below the collapsible-body of first collapsible.

When I click second collapsible-header then the first collapsible header is fixed(fine) but the third collapsible-header drops below the body of the second collapsible.

Clicking on the last collapsible header works fine (as expected).

Can someone give me a workaround for this?

Thanks in Advance, Nikhil

Upvotes: 0

Views: 692

Answers (1)

Niraj Kaushal
Niraj Kaushal

Reputation: 1502

You have to set position: absolute to collapsible-body but this is not a perfect way to do because as mentioned by @ic3b3rg, this component is not designed to work horizontally so instead of this you can use tabs or any other horizontal accordion.

<!DOCTYPE html>
<html>
<head>
  
  
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
  <link rel = "stylesheet"
  href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body >
<br><br><br><br>


  <ul style="display: inline" class="collapsible">
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
     <script>
 $(".collapsible").collapsible()
</script>   
</body>

</html>

Upvotes: 2

Related Questions