Hi Will

Is it possible that you could share your code for the accordion?

Sounds like you don't write out all the levels at the same time so you can just manage the visibility using a "current" or "active" or whatever CSS class that you prefer for handling what should be visible.

As such there are no existing articles about this since Umbraco is basically a framework, which you can build your own solutions upon on and no Umbraco implementation is done the same way - It's entirely up to the developer.

Looking forward to hearing from you.

/Jan

(((This is my file in the [Views] -> [MacroPartials] folder called SectionHeadlines.cshtml. This is the Accordion Menu)))

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@using System;
@using System.Collections; 

 @{
  var panelNameStr = "";
  var panelNameHref = "#";
  panelNameStr += "collapse";
  panelNameStr +=  @Model.MacroParameters["PanelNumber"].ToString();
  panelNameHref += panelNameStr;
 }

 <div class="panel layout-color-secondary">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a class="titleAnchor" data-toggle="collapse" data-parent="#accordion" href=@panelNameHref>@Model.MacroParameters["SectionName"].ToString()</a>
   </h4>
  </div>

   @if (@Session["NewsNavSection"] == "" && @Model.MacroParameters["SectionName"].ToString() == "Company"){
    @: <div id=@panelNameStr class="panel-collapse collapse in">
     }
   else if(@Session["NewsNavSection"] == @Model.MacroParameters["SectionName"].ToString()){
    @: <div id=@panelNameStr class="panel-collapse collapse in">
   }
   else {
    @: <div id=@panelNameStr class="panel-collapse collapse">
   
   }
   <div class="panel-body max-height-scrollable"> 
 
    
    @{
     ArrayList thisWeekHeadings = new ArrayList();
     ArrayList thisWeekUrl = new ArrayList();
     ArrayList thisWeekDate = new ArrayList();
     ArrayList last30Headings = new ArrayList();
     ArrayList last30Url = new ArrayList();
     ArrayList last30Date = new ArrayList();
     ArrayList last365Headings = new ArrayList();
     ArrayList last365Url = new ArrayList();
     ArrayList last365Date = new ArrayList();
     ArrayList archiveHeadings = new ArrayList();
     ArrayList archiveUrl = new ArrayList();
     ArrayList archiveDate = new ArrayList();
     
     DateTime Past7Days = DateTime.Today.AddDays(-7);
     DateTime Past30Days = DateTime.Today.AddDays(-30);
     DateTime Past365Days = DateTime.Today.AddDays(-365);
     DateTime ArticleDate = new DateTime();
    }
    
    
    @foreach(var item in CurrentPage.Parent.Children()) 
    {
     if ( item.Department.Contains(@Model.MacroParameters["SectionName"].ToString()))
     {
      ArticleDate = item.Date;
      string ArticleDateStr = item.Date.ToString("MM/dd/yyyy");
      string strURL = item.Url ;
      if( ArticleDate >= Past7Days){
       thisWeekHeadings.Add(@item.Title);
       thisWeekUrl.Add(@strURL);
       thisWeekDate.Add(@ArticleDateStr);
      }
      else if(ArticleDate >= Past30Days){
       last30Headings.Add(@item.Title);
       last30Url.Add(@strURL);
       last30Date.Add(@ArticleDateStr);
      }
      else if(ArticleDate >= Past365Days){
       last365Headings.Add(@item.Title);
       last365Url.Add(@strURL);
       last365Date.Add(@ArticleDateStr);
      }
      else {
       archiveHeadings.Add(@item.Title);
       archiveUrl.Add(@strURL);
       archiveDate.Add(@ArticleDateStr);
      }
     }
    }

    <div class="panel-group" id="headingsHistory" role="tablist" aria-multiselectable="true">
     @if(@thisWeekHeadings.Count > 0)
     {
      @*<h4 style="text-align:center;">Past 7 days!</h4>;*@
      
      for(int i=0; i < @thisWeekHeadings.Count ; i++ ){
       <span class="News-Heading-Date">@thisWeekDate[i]</span><a href=@thisWeekUrl[i] data-parent="#accordion" href="#collapse1"> @thisWeekHeadings[i] </a><br />
      }
      <hr />
     }
 
     @if(@last30Headings.Count > 0)
     {
      <div class="panel">
       <div class="panel-heading">
        <a data-parent="#headingsHistory" data-toggle="collapse" href="#collapselast30" aria-expanded="false" aria-controls="collapselast30">
         <h5 style="text-align:center;">Past 30 days</h5>
        </a>
       </div>
       <div class="collapse panel-collapse" id="collapselast30" role="tabpanel">
        <div class="panel-body">
         @for(int i=0; i < @last30Headings.Count ; i++ ){
          <span class="News-Heading-Date">@last30Date[i]</span><a href=@last30Url[i] data-parent="#accordion" href="#collapse1"> @last30Headings[i] </a><br />
         }
         <hr />
        </div>
       </div>
      </div>
     } 
     @if(@last30Headings.Count > 0)
     {
      <div class="panel">
       <div class="panel-heading">
        <a data-parent="#headingsHistory" data-toggle="collapse" href="#collapselast365" aria-expanded="false" aria-controls="collapselast365">
         <h5 style="text-align:center;">Past 365 days</h5>
        </a>
       </div>
       <div class="collapse panel-collapse" id="collapselast365" role="tabpanel"> 
        <div class="panel-body">
         @for(int i=0; i < @last365Headings.Count ; i++ ){
          <span class="News-Heading-Date">@last365Date[i]</span><a href=@last365Url[i] data-parent="#accordion" href="#collapse1"> @last365Headings[i] </a><br />
         }
         <hr />
        </div>
       </div>
      </div>
     }
     @if(@last30Headings.Count > 0)
     {
      <div class="panel">
       <div class="panel-heading">
        <a data-parent="#headingsHistory" data-toggle="collapse" href="#collapseArchive" aria-expanded="false" aria-controls="collapseArchive">
         <h5 style="text-align:center;">Archive</h5>
        </a>
       </div>
      <div class="collapse panel-collapse" id="collapseArchive" role="tabpanel"> 
        <div class="panel-body">
         @for(int i=0; i < @archiveHeadings.Count ; i++ ){
          <span class="News-Heading-Date">@archiveDate[i]</span><a href=@archiveUrl[i] data-parent="#accordion" href="#collapse1"> @archiveHeadings[i] </a><br />
         }
         <hr />
        </div>
       </div>
      </div>
     }
    </div>
     </div>
  </div>
 </div>
   

----------------------------------------------------------------------------------------------------------------------------------------------------------

(((Here is the file that calls it located in the [Views] folder called NewsArea.cshtml)))

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "SiteLayout.cshtml";
}
<div class="row layout-color-secondary-darkest" >
 <div class="news-accordion col-md-4 layout-color-darkest" style=""> 
  <div class="panel-group" id="accordion">
   
   @{
    string[] SectionNames = {"Company","Accounting","Content","Development","Human Resources","Network Administration","Sales & Marketing","Shipping","Tech Support"};
    
     for (int i=0;i < SectionNames.Length; i++)
     {
      @Umbraco.RenderMacro("SectionHeadlines", new {SectionName=SectionNames[i], PanelNumber=i})
     }
    
   }

  </div>
     
 </div>
     
 <div class="col-md-6 col-md-offset-1 layout-color-secondary-darkest">
  
  @RenderBody()
 </div>
 <div class="col-md-8" style="margin-top:50px;">

 </div> 
</div>
  

----------------------------------------------------------------------------------------------------------------------------------------------------------

((( Here is the file that is called up in the URL located at [Views] -> [Partials] called NewsArticle.cshtml)))

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    Layout = "NewsArea.cshtml";
}

<div class="article-heading col-md-12 layout-color-secondary-darkest">
 <h3 class="text-centered">@Umbraco.Field("title", recursive: true)</h3>
</div>
<div class="col-md-4 layout-color-secondary-darkest">
 <img src="@Umbraco.Media(CurrentPage.Image).Url" alt="@CurrentPage.title" />
</div>
<div class="col-md-8 layout-color-secondary-darkest">
 <p>@Umbraco.Field("body")</p>
  
</div>

----------------------------------------------------------------------------------------------------------------------------------------------------------

Please let me know if you need to see any other files like "SiteLayout.cshtml" and the Header/Footer files that are called up in the SiteLayout.cshtml

Please forgive me in advance for not using better methods of storing the arrays in this code of the lack of simplicity. I plan to deal with that at a later time when I have a chance. This community and group is the BEST!!!!

is working on a reply...