const accordionTitles = [
"What is HTML?"
,
"What is CSS?"
,
"What is JavaScript?"
,
];
const accordionDesc = [
`HTML stands
for
HyperText Markup Language.
It is used to design web pages using a markup language.`,
`Cascading Style Sheets, fondly referred to as
CSS, is a simply designed language intended to
simplify the process of making web pages presentable.`,
`JavaScript is a lightweight, cross-platform,
single-threaded, and interpreted compiled
programming language which is also known
as the scripting language
for
webpages`,
];
function
loadItem() {
accordionTitles.map((e, i) => {
createItem(e, accordionDesc[i]);
});
}
loadItem();
function
addItem() {
const title = document.getElementById(
"title"
).value;
const des =
document.getElementById(
"description"
).value;
if
(!title || !des) {
window.alert(
"Incomplete input"
);
}
else
{
createItem(title, des);
}
}
function
createItem(title, desc) {
const head = document.createElement(
"div"
);
head.classList.add(
"accordion-header"
);
head.innerText = title;
const des = document.createElement(
"div"
);
des.classList.add(
"accordion-content"
);
const p = document.createElement(
"p"
);
p.innerText = desc;
des.appendChild(p);
const item = document.createElement(
"div"
);
head.classList.add(
"accordion-item"
);
head.addEventListener(
"click"
, () => {
des.classList.toggle(
"active"
);
if
(des.style.display ===
"block"
) {
des.style.display =
"none"
;
}
else
{
des.style.display =
"block"
;
}
});
item.appendChild(head);
item.appendChild(des);
document.getElementById(
"menu"
).appendChild(item);
}