Applied suggested changes

osu.Game/Screens/Play/HUDOverlay.cs

@@ -33,6 +33,8 @@ namespace osu.Game.Screens.Play
         public readonly ReplaySettingsOverlay ReplaySettingsOverlay;
 
         private Bindable<bool> showHud;
+        private bool replaySettingsIsVisible;
+        private bool replayLoaded;
 
         private static bool hasShownNotificationOnce;
 
@@ -97,8 +99,10 @@ namespace osu.Game.Screens.Play
         {
             hitRenderer.InputManager.Add(KeyCounter.GetReceptor());
 
+            replayLoaded = hitRenderer.HasReplayLoaded;
+
             // in the case a replay isn't loaded, we want some elements to only appear briefly.
-            if (!hitRenderer.HasReplayLoaded)
+            if (!replayLoaded)
             {
                 ReplaySettingsOverlay.Hide();
                 ReplaySettingsOverlay.AlwaysPresent = false;
@@ -122,6 +126,18 @@ namespace osu.Game.Screens.Play
                 }
             }
 
+            switch (args.Key)
+            {
+                case Key.H:
+                    if (replayLoaded)
+                    {
+                        ReplaySettingsOverlay.FadeTo(replaySettingsIsVisible ? 1 : 0, duration);
+                        replaySettingsIsVisible = !replaySettingsIsVisible;
+                        return true;
+                    }
+                    else return false;
+            }
+
             return base.OnKeyDown(state, args);
         }
     }

osu.Game/Screens/Play/ReplaySettings/CollectionSettings.cs

@@ -10,7 +10,7 @@ using osu.Game.Graphics.UserInterface;
 
 namespace osu.Game.Screens.Play.ReplaySettings
 {
-    public class CollectionSettings : SettingsDropdownContainer
+    public class CollectionSettings : ReplaySettingsGroup
     {
         protected override string Title => @"collections";
 

osu.Game/Screens/Play/ReplaySettings/DiscussionSettings.cs

@@ -8,7 +8,7 @@ using osu.Game.Graphics.UserInterface;
 
 namespace osu.Game.Screens.Play.ReplaySettings
 {
-    public class DiscussionSettings : SettingsDropdownContainer
+    public class DiscussionSettings : ReplaySettingsGroup
     {
         protected override string Title => @"discussions";
 
@@ -19,7 +19,7 @@ namespace osu.Game.Screens.Play.ReplaySettings
             {
                 new ReplaySettingsCheckbox
                 {
-                    LabelText = "Show floating coments",
+                    LabelText = "Show floating comments",
                     Bindable = config.GetBindable<bool>(OsuSetting.FloatingComments)
                 },
                 new FocusedTextBox

osu.Game/Screens/Play/ReplaySettings/PlaybackSettings.cs

@@ -8,7 +8,7 @@ using osu.Framework.Graphics;
 
 namespace osu.Game.Screens.Play.ReplaySettings
 {
-    public class PlaybackSettings : SettingsDropdownContainer
+    public class PlaybackSettings : ReplaySettingsGroup
     {
         protected override string Title => @"playback";
 

osu.Game/Screens/Play/ReplaySettings/ReplaySettingsGroup.cs

@@ -0,0 +1,127 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK;
+using OpenTK.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Screens.Play.ReplaySettings
+{
+    public abstract class ReplaySettingsGroup : Container
+    {
+        /// <summary>
+        /// The title to be displayed in the header of this group.
+        /// </summary>
+        protected abstract string Title { get; }
+
+        private const float transition_duration = 600;
+        private const int container_width = 270;
+        private const int border_thickness = 2;
+        private const int header_height = 30;
+        private const int corner_radius = 5;
+
+        private readonly FillFlowContainer content;
+        private readonly IconButton button;
+        private bool expanded;
+
+        private Color4 buttonActiveColour;
+
+        public ReplaySettingsGroup()
+        {
+            AutoSizeAxes = Axes.Y;
+            Width = container_width;
+            Masking = true;
+            CornerRadius = corner_radius;
+            BorderColour = Color4.Black;
+            BorderThickness = border_thickness;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = Color4.Black,
+                    Alpha = 0.5f,
+                },
+                new FillFlowContainer
+                {
+                    Direction = FillDirection.Vertical,
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Children = new Drawable[]
+                    {
+                        new Container
+                        {
+                            Name = @"Header",
+                            Origin = Anchor.TopCentre,
+                            Anchor = Anchor.TopCentre,
+                            RelativeSizeAxes = Axes.X,
+                            Height = header_height,
+                            Children = new Drawable[]
+                            {
+                                new OsuSpriteText
+                                {
+                                    Origin = Anchor.CentreLeft,
+                                    Anchor = Anchor.CentreLeft,
+                                    Text = Title.ToUpper(),
+                                    TextSize = 17,
+                                    Font = @"Exo2.0-Bold",
+                                    Margin = new MarginPadding { Left = 10 },
+                                },
+                                button = new IconButton
+                                {
+                                    Origin = Anchor.Centre,
+                                    Anchor = Anchor.CentreRight,
+                                    Position = new Vector2(-15,0),
+                                    Icon = FontAwesome.fa_bars,
+                                    Scale = new Vector2(0.75f),
+                                    Action = triggerContentVisibility,
+                                },
+                            }
+                        },
+                        content = new FillFlowContainer
+                        {
+                            Name = @"Content",
+                            Origin = Anchor.TopCentre,
+                            Anchor = Anchor.TopCentre,
+                            Direction = FillDirection.Vertical,
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeDuration = transition_duration,
+                            AutoSizeEasing = EasingTypes.OutQuint,
+                            AutoSizeAxes = Axes.Y,
+                            Padding = new MarginPadding(15),
+                            Spacing = new Vector2(0, 15),
+                        }
+                    }
+                },
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            button.Colour = buttonActiveColour = colours.Yellow;
+        }
+
+        protected override Container<Drawable> Content => content;
+
+        private void triggerContentVisibility()
+        {
+            content.ClearTransforms();
+            content.AutoSizeAxes = expanded ? Axes.Y : Axes.None;
+
+            if (!expanded)
+                content.ResizeHeightTo(0, transition_duration, EasingTypes.OutQuint);
+
+            button.FadeColour(expanded ? buttonActiveColour : Color4.White, 200, EasingTypes.OutQuint);
+
+            expanded = !expanded;
+        }
+    }
+}

osu.Game/Screens/Play/ReplaySettings/ReplaySettingsOverlay.cs

@@ -2,19 +2,13 @@
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using OpenTK;
-using OpenTK.Input;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Input;
 
 namespace osu.Game.Screens.Play.ReplaySettings
 {
     public class ReplaySettingsOverlay : FillFlowContainer
     {
-        private const int fade_duration = 100;
-
-        private bool isVisible;
-
         public ReplaySettingsOverlay()
         {
             AlwaysPresent = true;
@@ -26,20 +20,5 @@ namespace osu.Game.Screens.Play.ReplaySettings
             Add(new DiscussionSettings());
             Add(new PlaybackSettings());
         }
-
-        protected override bool OnKeyDown(InputState state, KeyDownEventArgs args)
-        {
-            if (args.Repeat) return false;
-
-            switch (args.Key)
-            {
-                case Key.H:
-                    FadeTo(isVisible ? 1 : 0, fade_duration);
-                    isVisible = !isVisible;
-                    return true;
-            }
-
-            return base.OnKeyDown(state, args);
-        }
     }
 }