diff --git a/man/waybar.5.scd.in b/man/waybar.5.scd.in
index 8b923eef9..c76755f4f 100644
--- a/man/waybar.5.scd.in
+++ b/man/waybar.5.scd.in
@@ -374,6 +374,8 @@ A group may hide all but one element, showing them only on mouse hover. In order
 	Defines the direction of the transition animation. If true, the hidden elements will slide from left to right. If false, they will slide from right to left.
 	When the bar is vertical, it reads as top-to-bottom.
 
+Group drawers are also given the `.expanded` CSS class when they are expanded.
+
 ```
 "group/power": {
     "orientation": "inherit",
diff --git a/src/group.cpp b/src/group.cpp
index acd7bd421..be0fd0f17 100644
--- a/src/group.cpp
+++ b/src/group.cpp
@@ -95,11 +95,13 @@ Group::Group(const std::string& name, const std::string& id, const Json::Value&
 void Group::show_group() {
   box.set_state_flags(Gtk::StateFlags::STATE_FLAG_PRELIGHT);
   revealer.set_reveal_child(true);
+  box.get_style_context()->add_class("expanded");
 }
 
 void Group::hide_group() {
   box.unset_state_flags(Gtk::StateFlags::STATE_FLAG_PRELIGHT);
   revealer.set_reveal_child(false);
+  box.get_style_context()->remove_class("expanded");
 }
 
 bool Group::handleMouseEnter(GdkEventCrossing* const& e) {