I've successfully implemented an accordion collapse feature for my categories/subcategories where a user can click on the category name to reveal the subcategories below. However, now I want to display the categories/subcategories in a three-column grid in the center of the page but I'm having trouble getting it right. Can anyone provide some guidance on how to achieve this?
https://i.sstatic.net/ZDv2i.png
$('.toggle').click(function(e) {
e.preventDefault();
var $this = $(this);
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});ul {
list-style: none;
padding: 0;
text-decoration: underline;
.inner {
padding-left: 1em;
//overflow: hidden;
display: none;
&.show {
/*display: block;*/
}
}
li {
margin: .5em 0;
a.toggle {
width: 100%;
font-weight: bold;
display: inline-block;
color: #3c3d3d;
padding: 1.2em;
&:hover {
color: #c7c9c9;
}
}
}
}
.category-select:hover {color: #c7c9c9;}
.category-select {color: #787979;}<div class="container-fluid">
<div class="row">
<div class="col-md-8 offset-md-1">
<%= form_tag (search_url), :method => "get", id: "search-form" do %>
<div class="row">
<div class="col-md-4">
<ul class="accordion">
<li>
<% @categories.each do |category| %>
<a class="toggle" href="javascript:void(0);" style="text-decoration: none; text-align: center;"><%= category.name.capitalize %></a>
<% unless category.children.empty? %>
<ul class="inner" style="text-align: center;">
<% category.children.each do |subcategory| %>
<li><label class="category-select" style="cursor: pointer;">
<span style="display: none;"><%= check_box_tag :search, subcategory.id %></span>
<%= subcategory.name.capitalize %>
</label></li>
<% end %>
</ul>
<%end%>
<%end%>
<%= submit_tag '', :style => "display: none;" %>
<% end %>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>