Updated Accordion to support both Vertical as well as Horizontal layout

Editor/UIExtensionsMenuOptions.cs

@@ -711,25 +711,70 @@ namespace UnityEditor.UI
 		#endregion
 
 		#region Accordion
+		[MenuItem("GameObject/UI/Extensions/Accordion/Accordion", false)]
+		static public void AddAccordionVertical(MenuCommand menuCommand)
+		{
+			GameObject go = CreateUIElementRoot("Accordion Group", menuCommand, s_ThickGUIElementSize);
+			CreateAccordionGroup(go);
+            for (int i = 0; i < 3; i++)
+            {
+				GameObject child = CreateUIObject($"Accordion Element {i}", go);
+				CreateAccordionElement(child);
+			}
+			Selection.activeGameObject = go;
+		}
+
 		[MenuItem("GameObject/UI/Extensions/Accordion/Accordion Group", false)]
 		static public void AddAccordionGroup(MenuCommand menuCommand)
         {
             GameObject go = CreateUIElementRoot("Accordion Group", menuCommand, s_ThickGUIElementSize);
-			go.AddComponent<VerticalLayoutGroup>();
+            CreateAccordionGroup(go);
-			go.AddComponent<ContentSizeFitter>();
+            Selection.activeGameObject = go;
+        }
+
+        private static void CreateAccordionGroup(GameObject go)
+        {
+            var vlg = go.AddComponent<VerticalLayoutGroup>();
+            vlg.childControlHeight = true;
+            vlg.childControlWidth = true;
+            vlg.childForceExpandHeight = false;
+            vlg.childForceExpandHeight = true;
+            var csf = go.AddComponent<ContentSizeFitter>();
+            csf.verticalFit = ContentSizeFitter.FitMode.PreferredSize;
             go.AddComponent<ToggleGroup>();
             go.AddComponent<Accordion>();
-			Selection.activeGameObject = go;
         }
 
         [MenuItem("GameObject/UI/Extensions/Accordion/Accordion Element", false)]
 		static public void AddAccordionElement(MenuCommand menuCommand)
         {
             GameObject go = CreateUIElementRoot("Accordion Element", menuCommand, s_ThickGUIElementSize);
-			go.AddComponent<LayoutElement>();
+            CreateAccordionElement(go);
-			go.AddComponent<AccordionElement>();
-			Selection.activeGameObject = go;
 
+            Selection.activeGameObject = go;
+        }
+
+        private static void CreateAccordionElement(GameObject go)
+        {
+            var vlg = go.AddComponent<VerticalLayoutGroup>();
+            vlg.childControlHeight = true;
+            vlg.childControlWidth = true;
+            vlg.childForceExpandHeight = false;
+            vlg.childForceExpandHeight = true;
+            go.AddComponent<LayoutElement>();
+            var accordionElement = go.AddComponent<AccordionElement>();
+
+            // Header
+            GameObject headergo = CreateUIObject("Header", go);
+            var headerLayout = headergo.AddComponent<LayoutElement>();
+            headerLayout.minHeight = accordionElement.MinHeight;
+            var headerText = headergo.AddComponent<Text>();
+            headerText.text = "This is an Accordion header";
+
+            // Text
+            GameObject textgo = CreateUIObject("Text", go);
+            var textText = textgo.AddComponent<Text>();
+            textText.text = "This is an example of text in an accordion element\nLots of information can be put here for selection\nIf you like";
         }
         #endregion
 

Examples

@@ -1 +1 @@
-Subproject commit 8f7a9de774bcf64109a5e1362650e9f37572588f
+Subproject commit cf1a370339e25bc8fcdb10b80d0d9616f12ead0c

Runtime/Scripts/Controls/Accordion/Accordion.cs

@@ -4,10 +4,13 @@
 
 namespace UnityEngine.UI.Extensions
 {
-    [RequireComponent(typeof(VerticalLayoutGroup), typeof(ContentSizeFitter), typeof(ToggleGroup))]
+    [RequireComponent(typeof(HorizontalOrVerticalLayoutGroup), typeof(ContentSizeFitter), typeof(ToggleGroup))]
 	[AddComponentMenu("UI/Extensions/Accordion/Accordion Group")]
 	public class Accordion : MonoBehaviour
 	{
+		private bool m_expandVertical = true;
+		[HideInInspector]
+		public bool ExpandVerticval => m_expandVertical;
 
 		public enum Transition
 		{
@@ -37,5 +40,22 @@ namespace UnityEngine.UI.Extensions
 			get { return this.m_TransitionDuration; }
 			set { this.m_TransitionDuration = value; }
 		}
+
+        private void Awake()
+        {
+			m_expandVertical = GetComponent<HorizontalLayoutGroup>() ? false : true;
+			var group = GetComponent<ToggleGroup>();
+		}
+
+#if UNITY_EDITOR
+
+        private void OnValidate()
+        {
+            if (!GetComponent<HorizontalLayoutGroup>() && !GetComponent<VerticalLayoutGroup>())
+            {
+				Debug.LogError("Accordion requires either a Horizontal or Vertical Layout group to place children");
+            }
+        }
+#endif
 	}
 }

Runtime/Scripts/Controls/Accordion/AccordionElement.cs

@@ -13,6 +13,12 @@ namespace UnityEngine.UI.Extensions
 
 		[SerializeField] private float m_MinHeight = 18f;
 
+		public float MinHeight => m_MinHeight;
+
+		[SerializeField] private float m_MinWidth = 40f;
+
+		public float MinWidth => m_MinWidth;
+
 		private Accordion m_Accordion;
 		private RectTransform m_RectTransform;
 		private LayoutElement m_LayoutElement;
@@ -43,6 +49,7 @@ namespace UnityEngine.UI.Extensions
 		protected override void OnValidate()
 		{
 			base.OnValidate();
+			this.m_Accordion = this.gameObject.GetComponentInParent<Accordion>();
 
 			if (this.group == null)
 			{
@@ -59,13 +66,28 @@ namespace UnityEngine.UI.Extensions
 			if (le != null)
 			{
 				if (this.isOn)
+				{
+                    if (m_Accordion.ExpandVerticval)
                     {
 						le.preferredHeight = -1f;
 					}
                     else
+                    {
+						le.preferredWidth = -1f;
+                    }
+				}
+				else
+				{
+					if (m_Accordion.ExpandVerticval)
 					{
 						le.preferredHeight = this.m_MinHeight;
 					}
+                    else
+                    {
+						le.preferredWidth = this.m_MinWidth;
+
+					}
+				}
 			}
 		}
 #endif
@@ -80,24 +102,52 @@ namespace UnityEngine.UI.Extensions
 			if (transition == Accordion.Transition.Instant)
 			{
 				if (state)
+				{
+					if (m_Accordion.ExpandVerticval)
 					{
 						this.m_LayoutElement.preferredHeight = -1f;
 					}
                     else
+                    {
+						this.m_LayoutElement.preferredWidth = -1f;
+					}
+				}
+				else
+				{
+					if (m_Accordion.ExpandVerticval)
 					{
 						this.m_LayoutElement.preferredHeight = this.m_MinHeight;
 					}
+                    else
+                    {
+						this.m_LayoutElement.preferredWidth = this.m_MinWidth;
+					}
+				}
 			}
 			else if (transition == Accordion.Transition.Tween)
 			{
 				if (state)
+				{
+					if (m_Accordion.ExpandVerticval)
 					{
 						this.StartTween(this.m_MinHeight, this.GetExpandedHeight());
 					}
                     else
+                    {
+						this.StartTween(this.m_MinWidth, this.GetExpandedWidth());
+					}
+				}
+				else
+				{
+					if (m_Accordion.ExpandVerticval)
 					{
 						this.StartTween(this.m_RectTransform.rect.height, this.m_MinHeight);
 					}
+                    else
+                    {
+						this.StartTween(this.m_RectTransform.rect.width, this.m_MinWidth);
+					}
+				}
 			}
 		}
 		
@@ -114,6 +164,19 @@ namespace UnityEngine.UI.Extensions
 			return h;
 		}
 
+		protected float GetExpandedWidth()
+		{
+			if (this.m_LayoutElement == null)
+				return this.m_MinWidth;
+
+			float originalPrefW = this.m_LayoutElement.preferredWidth;
+			this.m_LayoutElement.preferredWidth = -1f;
+			float w = LayoutUtility.GetPreferredWidth(this.m_RectTransform);
+			this.m_LayoutElement.preferredWidth = originalPrefW;
+
+			return w;
+		}
+
 		protected void StartTween(float startFloat, float targetFloat)
 		{
 			float duration = (this.m_Accordion != null) ? this.m_Accordion.transitionDuration : 0.3f;
@@ -124,7 +187,14 @@ namespace UnityEngine.UI.Extensions
 				startFloat = startFloat,
 				targetFloat = targetFloat
 			};
+			if (m_Accordion.ExpandVerticval)
+			{
 				info.AddOnChangedCallback(SetHeight);
+			}
+            else
+            {
+				info.AddOnChangedCallback(SetWidth);
+			}
 			info.ignoreTimeScale = true;
 			this.m_FloatTweenRunner.StartTween(info);
 		}
@@ -136,5 +206,13 @@ namespace UnityEngine.UI.Extensions
 				
 			this.m_LayoutElement.preferredHeight = height;
 		}
+
+		protected void SetWidth(float width)
+		{
+			if (this.m_LayoutElement == null)
+				return;
+
+			this.m_LayoutElement.preferredWidth = width;
+		}
 	}
 }