Home > Net >  Accordion Javascript Menu - Open First Block
Accordion Javascript Menu - Open First Block

Time：11-19

I've been trying to get the first block of this accordion to open by default but haven't been able to. All of the examples I see are in jQuery and the code looks slightly different. Any and all help is appreciated. This is for a report I'm building.

[Here is the code.][1]

https://jsfiddle.net/infotech2/dc5k74em/3/

(function () {

//script parameters
const id="myAccordion1"
const w="500px"
const multiselect = true;


var el = document.getElementById(id);
el.className='container'
//var tmp = [...el.cloneNode(true).children];
//el.innerHTML=""
tmp = [...el.children]

tmp.forEach((e,i) => {
  let p = document.createElement('p');
  p.className="accordion_item"
  if(i%2==0){//titles
     dt = document.createElement('dt')
     dt.className="accordion__heading"
     btn = document.createElement("button")
     btn.className="accordion__trigger"
     btn.appendChild(e)
     dt.appendChild(btn)
     el.appendChild(dt)
  }else{//contents
     e.className="accordion__panel"
     p.appendChild(e)
     el.appendChild(e)
  }
})


//accordion stuff
  const headings = el.querySelectorAll(".accordion__heading");
  const triggers = [];
  const accordionContents = document.querySelectorAll(".accordion__panel");
  const copyOpenClass = "accordion__panel--open";

  headings.forEach((h, i) => {
    let btn = h.querySelector("button");
    triggers.push(btn);
    let target = h.nextElementSibling;
    btn.onclick = () => {
      let expanded = btn.getAttribute("aria-expanded") === "true";
      if (expanded) {
        closeItem(target, btn);
      } else {
        openItem(target, btn);
      }
    };
  });
  function closeAllExpandedItems() {
    const expandedTriggers = triggers.filter(
      (t) => t.getAttribute("aria-expanded") === "true"
    );
    const expandedCopy = Array.from(accordionContents).filter((c) =>
      c.classList.value.includes(copyOpenClass)
    );
    expandedTriggers.forEach((trigger) => {
      trigger.setAttribute("aria-expanded", false);
    });
    expandedCopy.forEach((copy) => {
      copy.classList.remove(copyOpenClass);
      copy.style.maxHeight = 0;
      copy.style.padding = "0 1.5rem 0 1.5rem";
    });
  }
  function closeItem(target, btn) {
    if (!multiselect) {
      closeAllExpandedItems();
    } else {
      btn.setAttribute("aria-expanded", false);
      target.classList.remove(copyOpenClass);
      target.style.maxHeight = 0;
      target.style.padding = "0 1.5rem 0 1.5rem";
    }
  }
  function openItem(target, btn) {
    if (!multiselect) {
      closeAllExpandedItems();
    }
    btn.setAttribute("aria-expanded", true);
    target.classList.add(copyOpenClass);
    target.style.maxHeight = target.scrollHeight   "px";
    target.style.padding = "1rem 1.5rem 2rem 1.5rem";
  }
  //setTimeout(() => triggers[0].click(), 750);
})();
//accordion look and feel
css=`<style>
dt.accordion__heading {
  font-size: .75rem;
  font-weight: normal;
  line-height: 1;
  margin: 0; 
  padding: 0;
}
.accordion__item{
  margin:0 !important;
}
.container {
  max-width: ${w};
  Xmargin: 0 auto;
  background: transparent;
}
.accordion {
  width: 100%;
  background: #fff;
  border:  1px solid RGB(45,132,219);
  text-align: left;
}
.accordion__trigger {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: inherit;
  /*   text-transform: uppercase; */
  letter-spacing: 2px;
  padding: 1rem 1.5rem;
  background: RGB(62,142,222); 
  color: white;
  cursor: pointer;
  transition: 0.3s ease;
  border: 0 none;
  border-bottom: 1px solid RGB(45,132,219);
  width: 100%;
  text-align: left;
  margin: 0;
  position: relative;
}
.accordion__trigger::after {
  content: "";
  position: absolute;
  right: 20px;
  top: calc(50% - 5px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff; /*arrow*/
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.5s;
}
.accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}
.accordion__trigger:hover,
.accordion__trigger:focus {
  background:  RGB(35,122,210);
}
.accordion__panel {
  overflow: hidden;
  padding: 0 1.5rem 0 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
  font-weight: 500;
  max-height: 0;
  border-right:1px solid  RGB(35,122,210);
  border-left:1px solid  RGB(35,122,210);
  visibility: hidden;
  transition: visibility 0.5s, padding 0.5s, max-height 0.5s;
}
.accordion__panel--open {
  visibility: visible;
  border-bottom:1px solid  RGB(35,122,210);

}
</style>`
<FONT size=2> 
<P><SpotfireControl id="aaa37ff537bc4cf1977755f7b80e0a40" /></P>
<div id='myAccordion1'>
<b>Controls</b>
<DIV>
<P><U>Date Slider</U></P>
<P><SpotfireControl id="b66eca7e1cff4295bf614b37f089546b" /></P>
<P><U>Total / Daily Avg</U></P>
<P><SpotfireControl id="882e441cd33847129f5179fe544a7d8e" /></P>
<P><U>Gross / Net</U></P>
<P><SpotfireControl id="788a04c90b30490ebca9ef58b2c13da9" /></P>
<P><U>Deferred <EM>BOE</EM> / <EM>Oil</EM> / <EM>Gas</EM> / <EM>NGL</EM></U></P>
<P><SpotfireControl id="b4d4c03dcd924eacb02614e5954aa93c" /></P>
<P><FONT color=#239e58><U>Hide Deferred for DT Types</U></FONT></P>
<P><FONT color=#239e58><SpotfireControl id="a0feb88eaa184527a3df20956c9e2291" /></FONT></P>
<P><U>Report Data Up Through</U></P>
<P><SpotfireControl id="cea1851e80024190a7539d6e7bb5f33b" /></P>
</div>
<b>Filters (Main)</b>
<DIV>
<P><U>Date</U></P>
<P><SpotfireControl id="c0b5976e75c841208ff40023cbfadd5e" /></P>
<P><U>Formation</U></P>
<P><SpotfireControl id="dfcf0dd748214ce39178edb65d687690" /></P>
<P><U>Well</U></P>
<P><SpotfireControl id="b8b08ecd1e9a42cfaaf4e1bda015f3a6" /></P>
<P><U>Pad</U></P>
<P><SpotfireControl id="9419ac81214d40769813b93d54aeec9a" /></P>
<P><U>Route</U></P>
<P><SpotfireControl id="7be74d9d54674b6ea6b248e15e627881" /></P>
</DIV>
<b>Filters (Downtime)</b>
<DIV>
<P><U>Primary DT Reason</U></P>
<P><SpotfireControl id="bdb60a369a8a4c8e94ac647f3c72807c" /></P>
<P><U>Secondary DT Reason</U></P>
<P><SpotfireControl id="267f49d05e9b47c7909b203d76714e69" /></P>
</DIV>
</DIV>
</FONT>

CodePudding user response：

So you already have the functions defined for when it's clicked. As you want the first one to open immediatly even without clicking you need to activate that function with your code. Just add this at the end of your script.

  let firstButton = headings[0].querySelector("button");
  let firstTarget = headings[0].nextElementSibling;
  openItem(firstTarget, firstButton);

DEMO

(function () {

//script parameters
const id="myAccordion1"
const w="500px"
const multiselect = true;


var el = document.getElementById(id);
el.className='container'
//var tmp = [...el.cloneNode(true).children];
//el.innerHTML=""
tmp = [...el.children]

tmp.forEach((e,i) => {
  let p = document.createElement('p');
  p.className="accordion_item"
  if(i%2==0){//titles
     dt = document.createElement('dt')
     dt.className="accordion__heading"
     btn = document.createElement("button")
     btn.className="accordion__trigger"
     btn.appendChild(e)
     dt.appendChild(btn)
     el.appendChild(dt)
  }else{//contents
     e.className="accordion__panel"
     p.appendChild(e)
     el.appendChild(e)
  }
})


//accordion stuff
  const headings = el.querySelectorAll(".accordion__heading");
  const triggers = [];
  const accordionContents = document.querySelectorAll(".accordion__panel");
  const copyOpenClass = "accordion__panel--open";

  headings.forEach((h, i) => {
    let btn = h.querySelector("button");
    triggers.push(btn);
    let target = h.nextElementSibling;
    btn.onclick = () => {
      let expanded = btn.getAttribute("aria-expanded") === "true";
      if (expanded) {
        closeItem(target, btn);
      } else {
        openItem(target, btn);
      }
    };
  });
  function closeAllExpandedItems() {
    const expandedTriggers = triggers.filter(
      (t) => t.getAttribute("aria-expanded") === "true"
    );
    const expandedCopy = Array.from(accordionContents).filter((c) =>
      c.classList.value.includes(copyOpenClass)
    );
    expandedTriggers.forEach((trigger) => {
      trigger.setAttribute("aria-expanded", false);
    });
    expandedCopy.forEach((copy) => {
      copy.classList.remove(copyOpenClass);
      copy.style.maxHeight = 0;
      copy.style.padding = "0 1.5rem 0 1.5rem";
    });
  }
  function closeItem(target, btn) {
    if (!multiselect) {
      closeAllExpandedItems();
    } else {
      btn.setAttribute("aria-expanded", false);
      target.classList.remove(copyOpenClass);
      target.style.maxHeight = 0;
      target.style.padding = "0 1.5rem 0 1.5rem";
    }
  }
  function openItem(target, btn) {
    if (!multiselect) {
      closeAllExpandedItems();
    }
    btn.setAttribute("aria-expanded", true);
    target.classList.add(copyOpenClass);
    target.style.maxHeight = target.scrollHeight   "px";
    target.style.padding = "1rem 1.5rem 2rem 1.5rem";
  }
  //setTimeout(() => triggers[0].click(), 750);
  
  //added scripted
  let firstButton = headings[0].querySelector("button");
  let firstTarget = headings[0].nextElementSibling;
  openItem(firstTarget, firstButton);
})();
//accordion look and feel
css=`<style>
dt.accordion__heading {
  font-size: .75rem;
  font-weight: normal;
  line-height: 1;
  margin: 0; 
  padding: 0;
}
.accordion__item{
  margin:0 !important;
}
.container {
  max-width: ${w};
  Xmargin: 0 auto;
  background: transparent;
}
.accordion {
  width: 100%;
  background: #fff;
  border:  1px solid RGB(45,132,219);
  text-align: left;
}
.accordion__trigger {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: inherit;
  /*   text-transform: uppercase; */
  letter-spacing: 2px;
  padding: 1rem 1.5rem;
  background: RGB(62,142,222); 
  color: white;
  cursor: pointer;
  transition: 0.3s ease;
  border: 0 none;
  border-bottom: 1px solid RGB(45,132,219);
  width: 100%;
  text-align: left;
  margin: 0;
  position: relative;
}
.accordion__trigger::after {
  content: "";
  position: absolute;
  right: 20px;
  top: calc(50% - 5px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff; /*arrow*/
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.5s;
}
.accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}
.accordion__trigger:hover,
.accordion__trigger:focus {
  background:  RGB(35,122,210);
}
.accordion__panel {
  overflow: hidden;
  padding: 0 1.5rem 0 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
  font-weight: 500;
  max-height: 0;
  border-right:1px solid  RGB(35,122,210);
  border-left:1px solid  RGB(35,122,210);
  visibility: hidden;
  transition: visibility 0.5s, padding 0.5s, max-height 0.5s;
}
.accordion__panel--open {
  visibility: visible;
  border-bottom:1px solid  RGB(35,122,210);

}
</style>`
<FONT size=2> 
<P><SpotfireControl id="aaa37ff537bc4cf1977755f7b80e0a40" /></P>
<div id='myAccordion1'>
<b>Controls</b>
<DIV>
<P><U>Date Slider</U></P>
<P><SpotfireControl id="b66eca7e1cff4295bf614b37f089546b" /></P>
<P><U>Total / Daily Avg</U></P>
<P><SpotfireControl id="882e441cd33847129f5179fe544a7d8e" /></P>
<P><U>Gross / Net</U></P>
<P><SpotfireControl id="788a04c90b30490ebca9ef58b2c13da9" /></P>
<P><U>Deferred <EM>BOE</EM> / <EM>Oil</EM> / <EM>Gas</EM> / <EM>NGL</EM></U></P>
<P><SpotfireControl id="b4d4c03dcd924eacb02614e5954aa93c" /></P>
<P><FONT color=#239e58><U>Hide Deferred for DT Types</U></FONT></P>
<P><FONT color=#239e58><SpotfireControl id="a0feb88eaa184527a3df20956c9e2291" /></FONT></P>
<P><U>Report Data Up Through</U></P>
<P><SpotfireControl id="cea1851e80024190a7539d6e7bb5f33b" /></P>
</div>
<b>Filters (Main)</b>
<DIV>
<P><U>Date</U></P>
<P><SpotfireControl id="c0b5976e75c841208ff40023cbfadd5e" /></P>
<P><U>Formation</U></P>
<P><SpotfireControl id="dfcf0dd748214ce39178edb65d687690" /></P>
<P><U>Well</U></P>
<P><SpotfireControl id="b8b08ecd1e9a42cfaaf4e1bda015f3a6" /></P>
<P><U>Pad</U></P>
<P><SpotfireControl id="9419ac81214d40769813b93d54aeec9a" /></P>
<P><U>Route</U></P>
<P><SpotfireControl id="7be74d9d54674b6ea6b248e15e627881" /></P>
</DIV>
<b>Filters (Downtime)</b>
<DIV>
<P><U>Primary DT Reason</U></P>
<P><SpotfireControl id="bdb60a369a8a4c8e94ac647f3c72807c" /></P>
<P><U>Secondary DT Reason</U></P>
<P><SpotfireControl id="267f49d05e9b47c7909b203d76714e69" /></P>
</DIV>
</DIV>
</FONT>

CodePudding user response：

There are probably a lot of ways to do this and some tweaks to you could, but the easiest given your code so far would just simply be to call the openItem(...) method when you first process the binding loop. Eg:

if (i === 0) openItem(target, btn)

(function () {

//script parameters
const id="myAccordion1"
const w="500px"
const multiselect = true;


var el = document.getElementById(id);
el.className='container'
//var tmp = [...el.cloneNode(true).children];
//el.innerHTML=""
tmp = [...el.children]

tmp.forEach((e,i) => {
  let p = document.createElement('p');
  p.className="accordion_item"
  if(i%2==0){//titles
     dt = document.createElement('dt')
     dt.className="accordion__heading"
     btn = document.createElement("button")
     btn.className="accordion__trigger"
     btn.appendChild(e)
     dt.appendChild(btn)
     el.appendChild(dt)
  }else{//contents
     e.className="accordion__panel"
     p.appendChild(e)
     el.appendChild(e)
  }
})


//accordion stuff
  const headings = el.querySelectorAll(".accordion__heading");
  const triggers = [];
  const accordionContents = document.querySelectorAll(".accordion__panel");
  const copyOpenClass = "accordion__panel--open";

  headings.forEach((h, i) => {
    let btn = h.querySelector("button");
    triggers.push(btn);
    let target = h.nextElementSibling;
    btn.onclick = () => {
      let expanded = btn.getAttribute("aria-expanded") === "true";
      if (expanded) {
        closeItem(target, btn);
      } else {
        openItem(target, btn);
      }
    };
    if (i === 0) openItem(target, btn)
  });
  function closeAllExpandedItems() {
    const expandedTriggers = triggers.filter(
      (t) => t.getAttribute("aria-expanded") === "true"
    );
    const expandedCopy = Array.from(accordionContents).filter((c) =>
      c.classList.value.includes(copyOpenClass)
    );
    expandedTriggers.forEach((trigger) => {
      trigger.setAttribute("aria-expanded", false);
    });
    expandedCopy.forEach((copy) => {
      copy.classList.remove(copyOpenClass);
      copy.style.maxHeight = 0;
      copy.style.padding = "0 1.5rem 0 1.5rem";
    });
  }
  function closeItem(target, btn) {
    if (!multiselect) {
      closeAllExpandedItems();
    } else {
      btn.setAttribute("aria-expanded", false);
      target.classList.remove(copyOpenClass);
      target.style.maxHeight = 0;
      target.style.padding = "0 1.5rem 0 1.5rem";
    }
  }
  function openItem(target, btn) {
    if (!multiselect) {
      closeAllExpandedItems();
    }
    btn.setAttribute("aria-expanded", true);
    target.classList.add(copyOpenClass);
    target.style.maxHeight = target.scrollHeight   "px";
    target.style.padding = "1rem 1.5rem 2rem 1.5rem";
  }
  //setTimeout(() => triggers[0].click(), 750);
})();
//accordion look and feel

dt.accordion__heading {
  font-size: .75rem;
  font-weight: normal;
  line-height: 1;
  margin: 0; 
  padding: 0;
}
.accordion__item{
  margin:0 !important;
}
.container {
  max-width: ${w};
  Xmargin: 0 auto;
  background: transparent;
}
.accordion {
  width: 100%;
  background: #fff;
  border:  1px solid RGB(45,132,219);
  text-align: left;
}
.accordion__trigger {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: inherit;
  /*   text-transform: uppercase; */
  letter-spacing: 2px;
  padding: 1rem 1.5rem;
  background: RGB(62,142,222); 
  color: white;
  cursor: pointer;
  transition: 0.3s ease;
  border: 0 none;
  border-bottom: 1px solid RGB(45,132,219);
  width: 100%;
  text-align: left;
  margin: 0;
  position: relative;
}
.accordion__trigger::after {
  content: "";
  position: absolute;
  right: 20px;
  top: calc(50% - 5px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff; /*arrow*/
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.5s;
}
.accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}
.accordion__trigger:hover,
.accordion__trigger:focus {
  background:  RGB(35,122,210);
}
.accordion__panel {
  overflow: hidden;
  padding: 0 1.5rem 0 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
  font-weight: 500;
  max-height: 0;
  border-right:1px solid  RGB(35,122,210);
  border-left:1px solid  RGB(35,122,210);
  visibility: hidden;
  transition: visibility 0.5s, padding 0.5s, max-height 0.5s;
}
.accordion__panel--open {
  visibility: visible;
  border-bottom:1px solid  RGB(35,122,210);

}
<FONT size=2> 
<P><SpotfireControl id="aaa37ff537bc4cf1977755f7b80e0a40" /></P>
<div id='myAccordion1'>
<b>Controls</b>
<DIV>
<P><U>Date Slider</U></P>
<P><SpotfireControl id="b66eca7e1cff4295bf614b37f089546b" /></P>
<P><U>Total / Daily Avg</U></P>
<P><SpotfireControl id="882e441cd33847129f5179fe544a7d8e" /></P>
<P><U>Gross / Net</U></P>
<P><SpotfireControl id="788a04c90b30490ebca9ef58b2c13da9" /></P>
<P><U>Deferred <EM>BOE</EM> / <EM>Oil</EM> / <EM>Gas</EM> / <EM>NGL</EM></U></P>
<P><SpotfireControl id="b4d4c03dcd924eacb02614e5954aa93c" /></P>
<P><FONT color=#239e58><U>Hide Deferred for DT Types</U></FONT></P>
<P><FONT color=#239e58><SpotfireControl id="a0feb88eaa184527a3df20956c9e2291" /></FONT></P>
<P><U>Report Data Up Through</U></P>
<P><SpotfireControl id="cea1851e80024190a7539d6e7bb5f33b" /></P>
</div>
<b>Filters (Main)</b>
<DIV>
<P><U>Date</U></P>
<P><SpotfireControl id="c0b5976e75c841208ff40023cbfadd5e" /></P>
<P><U>Formation</U></P>
<P><SpotfireControl id="dfcf0dd748214ce39178edb65d687690" /></P>
<P><U>Well</U></P>
<P><SpotfireControl id="b8b08ecd1e9a42cfaaf4e1bda015f3a6" /></P>
<P><U>Pad</U></P>
<P><SpotfireControl id="9419ac81214d40769813b93d54aeec9a" /></P>
<P><U>Route</U></P>
<P><SpotfireControl id="7be74d9d54674b6ea6b248e15e627881" /></P>
</DIV>
<b>Filters (Downtime)</b>
<DIV>
<P><U>Primary DT Reason</U></P>
<P><SpotfireControl id="bdb60a369a8a4c8e94ac647f3c72807c" /></P>
<P><U>Secondary DT Reason</U></P>
<P><SpotfireControl id="267f49d05e9b47c7909b203d76714e69" /></P>
</DIV>
</DIV>
</FONT>

Page link：https//www.codepudding.com/net/615157.html

Prev:How do I use information from my javascript (const) to insert into my html?
Next:Printing value of custom attributes on multiple divs
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding