diff --git a/app/views/foreman_puppet/puppetclasses/_classes.html.erb b/app/views/foreman_puppet/puppetclasses/_classes.html.erb
index 1ef1215e..88b93c39 100644
--- a/app/views/foreman_puppet/puppetclasses/_classes.html.erb
+++ b/app/views/foreman_puppet/puppetclasses/_classes.html.erb
@@ -2,21 +2,36 @@
   <div class="col-md-6 classes">
     <% group.each do |list| %>
       <% next if list.nil? %>
-      <ul class="puppetclass_group">
-        <li><%= puppetclass_group_with_icon(list, selected_puppet_classes) %>
-          <ul id="pc_<%= list.first %>" style="display: none;">
-            <% for klass in list.last.sort %>
-              <% unless authorized_for(controller: :host_editing, action: :edit_classes) %>
-                <li data-original-title="<%= _('Not authorized to edit classes') %>" rel="twipsy"><%= h klass.name %></li>
-              <% else %>
-                <li id="puppetclass_<%= klass.id %>" class="puppetclass<%= ' hide' if selected_puppet_classes.include?(klass) %>">
-                  <%= link_to_add_puppetclass(klass, resource_type) %>
-                </li>
-              <% end %>
-            <% end %>
-          </ul>
-        </li>
-      </ul>
+
+      <div class="panel-group paneless puppetclass_group" id="<%= list.first %>-avail-classes" style="margin-bottom: 1px;">
+	<div class="panel-heading" style="padding-top: 2px; padding-bottom: 2px;">
+	  <p class="panel-title">
+	    <a data-toggle="collapse" data-parent="#<%= list.first %>-avail-classes" href="#<%= list.first %>-avail-classes-list" class="collapsed">
+	      <%= h list.first %>
+	    </a>
+	  </p>
+	</div>
+	<div id="<%= list.first %>-avail-classes-list" class="panel-collapse collapse">
+	  <div class="panel-body">
+	    <ul style="margin-bottom: 1px;">
+	      <% for klass in list.last.sort %>
+	        <% unless authorized_for(:controller => :host_editing, :action => :edit_classes) %>
+	          <li data-original-title="<%= _('Not authorized to edit classes') %>" rel="twipsy">
+	            <%= h klass.name %>
+		  </li>
+		<% else %>
+		  <% style = ["puppetclass",
+		              selected_puppet_classes.include?(klass) ? "hide" : "",
+		             ].join(' ') %>
+		  <%= content_tag(:li, klass, :id=>"puppetclass_#{klass.id}", :class=>style) do %>
+                    <%= link_to_add_puppetclass(klass,type) %>
+		  <% end %>
+		<% end %>
+	      <% end %>
+	    </ul>
+	  </div>
+	</div>
+      </div>
     <% end %>
   </div>
 <% end %>
diff --git a/webpack/src/foreman_class_edit.js b/webpack/src/foreman_class_edit.js
index c39d9c5e..d36ed5b0 100644
--- a/webpack/src/foreman_class_edit.js
+++ b/webpack/src/foreman_class_edit.js
@@ -28,9 +28,18 @@ export function filterPuppetClasses(item) {
     classElems
       .hide()
       .has(`[data-class-name*="${term}"]`)
-      .show();
+      .show()
+      .filter('div')
+      .find('a.collapsed')
+      .attr('aria-expanded','true')
+      .click();
   } else {
-    classElems.show();
+    classElems
+      .show()
+      .has('.collapse')
+      .find('a[aria-expanded]')
+      .attr('aria-expanded','false')
+      .click();
   }
 }