Adding class onload using jQuery - Accordion expand and collapse

Syntax:   $('.navigation a:first').addClass('active');


1. Below is the styles (.css file)

/* Accordion - Starts */
/*----- Accordion -----*/
#accordion a.opener.box {
 border: 1px solid green;
 margin-left 40px;
 width: 30px;
 height: 30px;
 text-align: center;
 line-height: 30px;
    font-size 20px;
}
.accordion-close span {
 display: block;
 float: right;
 background: url(../images/plus.png) center center no-repeat;
 padding: 10px;
}
.accordion-open span {
 background: url(../images/minus.png) center center no-repeat;
}
.accordion, .accordion * {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.accordion {
 overflow: hidden;
 box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
 border-radius: 3px;
/* background: #006994; */
 background:#008CC6;
}
/*----- Section Titles -----*/

.accordion-section-title {
 width: 100%;
 padding: 15px;
 display: inline-block;
 border-bottom: 1px solid #1a1a1a;
  background: url(../images/icon_plus.png) right center no-repeat;
 transition: all linear 0.15s; /* Type */;
 font-size: 1.200em;
 text-shadow: 0px 1px 0px #1a1a1a;
 color: #fff;
}
.accordion-section-title.active {
  background: url(../images/icon_minus.png) right center no-repeat;
}
.active1{
 background: url(../images/icon_minus.png) right center no-repeat;
}

.accordion-section-title:hover{
 text-decoration: none;
}


.accordion-section:last-child .accordion-section-title {
 border-bottom: none;
}
/*----- Section Content -----*/
.accordion-section-content {
 padding: 15px;
 display: none;
 background: #f7f7f7;
}


2. Below is the jQuery

Note: Please include
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

<script type="text/javascript">
 
 $(document).ready(function() {
 //Expanding the div by adding the minus symbol style on load
 $('.accordion a:first').addClass('active');
 //Expanding the div tag on load
 $('.accordion ' + '#accordion-1').slideDown(1200).addClass('open');
 

    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(600).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(600).addClass('open');
        }

        e.preventDefault();
    });
});
          
      
        </script>


3. Below is the div part


<div class="accordion">
  <div class="accordion-section">
   <a class="accordion-section-title" href="#accordion-1">Hematology
   </a>
   <div id="accordion-1" class="accordion-section-content">
    <div data-name="WebPartZone">
     <!--CS: Start Web Part Zone Snippet-->
     <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
     <div xmlns:ie="ie">
      <!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="x4e8033eb52de456e950945156966cc8f" FrameType="TitleBarOnly" Orientation="Vertical">-->
      <!--MS:<ZoneTemplate>-->
      <!--DC: Replace this comment with default web parts for new pages. -->
      <!--ME:</ZoneTemplate>-->
      <!--ME:</WebPartPages:WebPartZone>--></div>
     <!--CE: End Web Part Zone Snippet--></div>
   </div>
   <!--end .accordion-section-content--></div>
  <!--end .accordion-section-->
  <div class="accordion-section">
   <a class="accordion-section-title" href="#accordion-2">Oncology
   </a>
   <div id="accordion-2" class="accordion-section-content">
    <div data-name="WebPartZone">
     <!--CS: Start Web Part Zone Snippet-->
     <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
     <div xmlns:ie="ie">
      <!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="x3ea92fe4237a4e75bdea4751bc6bd928" FrameType="TitleBarOnly" Orientation="Vertical">-->
      <!--MS:<ZoneTemplate>-->
      <!--DC: Replace this comment with default web parts for new pages. -->
      <!--ME:</ZoneTemplate>-->
      <!--ME:</WebPartPages:WebPartZone>--></div>
     <!--CE: End Web Part Zone Snippet--></div>
   </div>
   <!--end .accordion-section-content--></div>
  <!--end .accordion-section-->
  <div class="accordion-section">
   <a class="accordion-section-title" href="#accordion-3">Immunology
   </a>
   <div id="accordion-3" class="accordion-section-content">
    <div data-name="WebPartZone">
     <!--CS: Start Web Part Zone Snippet-->
     <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
     <div xmlns:ie="ie">
      <!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="xab3a52a4a71f43f098d5e7b5e51d2e2a" FrameType="TitleBarOnly" Orientation="Vertical">-->
      <!--MS:<ZoneTemplate>-->
      <!--DC: Replace this comment with default web parts for new pages. -->
      <!--ME:</ZoneTemplate>-->
      <!--ME:</WebPartPages:WebPartZone>--></div>
     <!--CE: End Web Part Zone Snippet--></div>
   </div>
   <!--end .accordion-section-content--></div>
  <!--end .accordion-section--></div>


  

Comments

Post a Comment

Popular posts from this blog

Run Powershell script on Remote Computer/Server

Image
PowerShell Remoting allows you to run individual PowerShell commands or access full PowerShell sessions on remote Windows systems.   PowerShell is locked-down by default, so you’ll have to enable PowerShell Remoting before using it. This setup process is a bit more complex if you’re using a workgroup – for example, on a home network — instead of a domain.   Enabling PowerShell Remoting On the computer you want to access remotely, open a PowerShell window as Administrator – right click the PowerShell shortcut and select Run as Administrator.   To enable PowerShell Remoting, run the following command (known as a cmdlet in PowerShell):  Enable-PSRemoting -Force This command starts the WinRM service, sets it to start automatically with your system, and creates a firewall rule that allows incoming connections. The -Force part of the command tells PowerShell to perform these actions without prompting you for each step     Workgroup ...
Read more

Power BI Refresh Issue: unable to convert the value '' from the source data type 'VT_BSTR' to the expected data type 'VT_I8.

Image
While scheduling refresh in Power BI, you might get below error . Issue: Unable to convert the value '<pii></pii>' from the source data type 'VT_BSTR' to the expected data type 'VT_I8 .     Cause/Reason Behind: Column datatype mismatch between power bi desktop and power bi cloud report. Solution: Edit query in power bi desktop and change the data type so it’s in sync with Power BI service/cloud. Example: In my case, I have modified a column’s datatype from decimal to whole number (to display no. of days). Now power bi desktop and power bi service synced up and I could perform automatic data refresh.
Read more

SPDActivities - DP.SharePoint.Workflow - Workflow failed to run

Image
One of my SP 2016 application is using SPDActivities of Email extended feature of DP.SharePoint.Workflow to provide custom "From" address. But customers started to complain that they are not getting reminder emails anymore. Find below my STAR analysis, Situation : Recently I was facing an issue - Approval workflow failed to run. Customers not getting reminder emails anymore. Task : - Planned to look into SharePoint services, IIS site, web.config files (WFE and App Server), Latest patch/MS update/CU, Users permission. Analysis : Started looking into each below items,  - SharePoint Timer Service and Administration services were running and good - Account which is running the workflow got required permission - DP.SharePoint.Workflow got activated for the web application - Checked into web.config file in WFE server and App Server for below sections Under <SafeControls> below 3 lines need to added both in WFE and App server web.config files, ...
Read more