title: Collapse expander, when one list item is in open- Windows uwp
body: <p>I am using an expand panel to expand/collapse a list.</p>
  
  <p>My problem is, at a time only one item only in expanded state. In my case if i expand one item without collapsing and i expand other item, then both the list items are in expanded state only, previous expanded item didn,t get collapse.</p>
  
  <p><a href="https://i.stack.imgur.com/6i9M1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6i9M1.png" alt="enter image description here"></a>
  Refer image. If you see the image, all the 3 items are in expanded state only. Without automatic collapse</p>
  
  <p>Here is my code:</p>
  
  <p>ExpandPanel.cs:</p>
  
  <pre><code>public ExpandPanel()
          {
              this.DefaultStyleKey = typeof(ExpandPanel);
          }
  
          private bool _useTransitions = true;
          private VisualState _collapsedState;
          public Windows.UI.Xaml.Controls.Primitives.ToggleButton toggleExpander;
          private FrameworkElement contentElement;
  
          public static readonly DependencyProperty HeaderContentProperty =
          DependencyProperty.Register("HeaderContent", typeof(object),
          typeof(ExpandPanel), null);
  
          public static readonly DependencyProperty IsExpandedProperty =
          DependencyProperty.Register("IsExpanded", typeof(bool),
          typeof(ExpandPanel), new PropertyMetadata(true, IsExpanded_Changed));
  
          public static readonly DependencyProperty CornerRadiusProperty =
          DependencyProperty.Register("CornerRadius", typeof(CornerRadius),
          typeof(ExpandPanel), null);
  
          public object HeaderContent
          {
              get { return GetValue(HeaderContentProperty); }
              set { SetValue(HeaderContentProperty, value); }
          }
  
          public bool IsExpanded
          {
              get { return (bool)GetValue(IsExpandedProperty); }
              set { SetValue(IsExpandedProperty, value); }
          }
  
          public CornerRadius CornerRadius
          {
              get { return (CornerRadius)GetValue(CornerRadiusProperty); }
              set { SetValue(CornerRadiusProperty, value); }
          }
  
          private static void IsExpanded_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs args)
          {
              var panel = (ExpandPanel)sender;
              panel.changeVisualState(false);
          }
  
          public void changeVisualState(bool useTransitions)
          {
              if (IsExpanded)
              {
                  if (contentElement != null)
                  {
                      contentElement.Visibility = Visibility.Visible;
                  }
                  VisualStateManager.GoToState(this, "Expanded", useTransitions);
              }
              else
              {
                  VisualStateManager.GoToState(this, "Collapsed", useTransitions);
                  _collapsedState = (VisualState)GetTemplateChild("Collapsed");
                  if (_collapsedState == null)
                  {
                      if (contentElement != null)
                      {
                          contentElement.Visibility = Visibility.Collapsed;
                      }
                  }
              }
          }
  
          protected override void OnApplyTemplate()
          {
              base.OnApplyTemplate();
              toggleExpander = (Windows.UI.Xaml.Controls.Primitives.ToggleButton)
                  GetTemplateChild("ExpandCollapseButton");
              if (toggleExpander != null)
              {
                  toggleExpander.Click += (object sender, RoutedEventArgs e) =&gt;
                  {
                      IsExpanded = !IsExpanded;
                      toggleExpander.IsChecked = IsExpanded;
                      changeVisualState(_useTransitions);
                  };
              }
              contentElement = (FrameworkElement)GetTemplateChild("Content");
              if (contentElement != null)
              {
                  _collapsedState = (VisualState)GetTemplateChild("Collapsed");
                  if ((_collapsedState != null) &amp;&amp; (_collapsedState.Storyboard != null))
                  {
                      _collapsedState.Storyboard.Completed += (object sender, object e) =&gt;
                      {
                          contentElement.Visibility = Visibility.Collapsed;
                      };
                  }
              }
              changeVisualState(false);
          }
  </code></pre>
  
  <p>xaml code:</p>
  
  <pre><code>&lt;Grid Grid.Row="2"&gt;
                                      &lt;Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5"&gt;
                                          &lt;local:ExpandPanel x:Name="weekExpandPanel" HeaderContent="வார பலன்கள்" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold"&gt;
                                              &lt;local:ExpandPanel.Content&gt;
                                                  &lt;TextBlock x:Name="weekAstrology" TextWrapping="Wrap" FontWeight="Normal"&gt;&lt;/TextBlock&gt;
                                              &lt;/local:ExpandPanel.Content&gt;
                                          &lt;/local:ExpandPanel&gt;
                                      &lt;/Border&gt;
                                  &lt;/Grid&gt;
  
                                  &lt;Grid Grid.Row="3"&gt;
                                      &lt;Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5"&gt;
                                          &lt;local:ExpandPanel x:Name="monthExpandPanel" HeaderContent="தமிழ் மாத ஜோதிடம்" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold"&gt;
                                              &lt;local:ExpandPanel.Content&gt;
                                                  &lt;TextBlock x:Name="monthlyAstrology" TextWrapping="Wrap" FontWeight="Normal"&gt;&lt;/TextBlock&gt;
                                              &lt;/local:ExpandPanel.Content&gt;
                                          &lt;/local:ExpandPanel&gt;
                                      &lt;/Border&gt;
                                  &lt;/Grid&gt;
  
                                  &lt;Grid Grid.Row="4"&gt;
                                      &lt;Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5"&gt;
                                          &lt;local:ExpandPanel x:Name="yearExpandPanel" HeaderContent="ஆண்டு பலன்" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold"&gt;
                                              &lt;local:ExpandPanel.Content&gt;
                                                  &lt;TextBlock x:Name="yearlyAstrology" TextWrapping="Wrap" FontWeight="Normal"&gt;&lt;/TextBlock&gt;
                                              &lt;/local:ExpandPanel.Content&gt;
                                          &lt;/local:ExpandPanel&gt;
                                      &lt;/Border&gt;
                                  &lt;/Grid&gt;
  </code></pre>
  
  <p>.cs file:</p>
  
  <pre><code>weekAstrology.Text= "test";
  
  monthlyAstrology.Text= "test1";
  yearlyAstrology.Text= rootObject["ZodiacSignDetails"][0]["Astrotextyearly"].ToString();
  </code></pre>
  
  <p>my xaml code of custom control:</p>
  
  <pre><code>&lt;Style TargetType="local:ExpandPanel" &gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="local:ExpandPanel"&gt;
                      &lt;Grid&gt;
                          &lt;VisualStateManager.VisualStateGroups&gt;
                              &lt;VisualStateGroup x:Name="ViewStates"&gt;
                                  &lt;VisualStateGroup.Transitions&gt;
                                      &lt;VisualTransition GeneratedDuration="0:0:0.5"/&gt;
                                  &lt;/VisualStateGroup.Transitions&gt;
                                  &lt;VisualState x:Name="Expanded"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                      Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/&gt;
                                          &lt;DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                      Storyboard.TargetProperty="Angle" To="180" Duration="0"/&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                                  &lt;VisualState x:Name="Collapsed"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                      Storyboard.TargetProperty="ScaleY" To="0" Duration="0"/&gt;
                                          &lt;DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                      Storyboard.TargetProperty="Angle" To="0" Duration="0"/&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                              &lt;/VisualStateGroup&gt;
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                          &lt;Border BorderBrush="{TemplateBinding BorderBrush}"
      BorderThickness="{TemplateBinding BorderThickness}"
      CornerRadius="{TemplateBinding CornerRadius}"
      Background="{TemplateBinding Background}"&gt;
                              &lt;Grid&gt;
                                  &lt;Grid.RowDefinitions&gt;
                                      &lt;RowDefinition Height="Auto"/&gt;
                                      &lt;RowDefinition Height="*"/&gt;
                                  &lt;/Grid.RowDefinitions&gt;
                                  &lt;Grid Margin="3"&gt;
                                      &lt;Grid.ColumnDefinitions&gt;
                                          &lt;ColumnDefinition Width="*"/&gt;
                                          &lt;ColumnDefinition Width="Auto"/&gt;
                                      &lt;/Grid.ColumnDefinitions&gt;
                                      &lt;ContentPresenter Grid.Column="0" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" FontSize="16"/&gt;
                                      &lt;ToggleButton Grid.Column="1" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton"&gt;
                                          &lt;ToggleButton.Template&gt;
                                              &lt;ControlTemplate&gt;
                                                  &lt;Grid&gt;
                                                      &lt;Ellipse Width="35" Height="35" Fill="{ThemeResource ToggleSwitchCurtainBackgroundThemeBrush}" Margin="0,0,0,0"/&gt;
                                                      &lt;Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center"
                                  Data="M2,3L9,10 16,3" Stroke="{ThemeResource ToggleButtonCheckedForegroundThemeBrush}" StrokeThickness="4" Margin="0,0,0,0"/&gt;
                                                  &lt;/Grid&gt;
                                              &lt;/ControlTemplate&gt;
                                          &lt;/ToggleButton.Template&gt;
                                          &lt;ToggleButton.RenderTransform&gt;
                                              &lt;RotateTransform x:Name="RotateButtonTransform"/&gt;
                                          &lt;/ToggleButton.RenderTransform&gt;
                                      &lt;/ToggleButton&gt;
                                  &lt;/Grid&gt;
                                  &lt;ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content"&gt;
                                      &lt;ContentPresenter.RenderTransform&gt;
                                          &lt;ScaleTransform x:Name="ContentScaleTransform"/&gt;
                                      &lt;/ContentPresenter.RenderTransform&gt;
                                  &lt;/ContentPresenter&gt;
                              &lt;/Grid&gt;
                          &lt;/Border&gt;
                      &lt;/Grid&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>How to collapse one item if i click on other item.
  Any help will be highly appreciated.
  Thank you.</p>