diff --git a/.gitignore b/.gitignore index e43b0f9..2e32153 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .DS_Store +*.config \ No newline at end of file diff --git a/Smooth-Accordion-Dropdown/css/style.css b/Smooth-Accordion-Dropdown/css/style.css new file mode 100644 index 0000000..14f3b7a --- /dev/null +++ b/Smooth-Accordion-Dropdown/css/style.css @@ -0,0 +1,44 @@ +.container { + width: 80%; + max-width: 600px; + margin: 50px auto; + } + + button.accordion { + width: 100%; + background-color: whitesmoke; + border: none; + outline: none; + text-align: left; + padding: 15px 20px; + font-size: 18px; + color: #444; + cursor: pointer; + transition: all 0.2s linear; + } + + button.accordion:after { + content: '\f055'; + font-family: "fontawesome"; + font-size: 14px; + float: right; + } + + button.accordion.is-open:after { + content: '\f056'; + } + + button.accordion:hover, button.accordion.is-open { + background-color: #ddd; + } + + .accordion-content { + background-color: white; + border-left: 1px solid whitesmoke; + border-right: 1px solid whitesmoke; + padding: 0 20px; + max-height: 0; + overflow: hidden; + transition: all 0.25s ease-in-out; + } + \ No newline at end of file diff --git a/Smooth-Accordion-Dropdown/index.html b/Smooth-Accordion-Dropdown/index.html new file mode 100644 index 0000000..305f7b1 --- /dev/null +++ b/Smooth-Accordion-Dropdown/index.html @@ -0,0 +1,62 @@ + + + + + + Accordions + + + + + + + + + +
+

Accordions

+ + +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? +

+
+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? +

+
+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? +

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? +

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? +

+
+
+ + + + + + diff --git a/Smooth-Accordion-Dropdown/js/scripts.js b/Smooth-Accordion-Dropdown/js/scripts.js new file mode 100644 index 0000000..6d45744 --- /dev/null +++ b/Smooth-Accordion-Dropdown/js/scripts.js @@ -0,0 +1,18 @@ +const container = document.getElementById("container") +const arrContent = [...document.querySelectorAll('.accordion-content')] + +container.addEventListener('click',e=>{ + e.preventDefault() + let target =e.target + if(target.tagName!=='BUTTON') return + target.classList.toggle('is-open') + let content = target.nextElementSibling + arrContent.forEach(cont=>{ + if(cont!==content){ + cont.previousElementSibling.classList.remove('is-open') + cont.style.maxHeight = null + } + }) + if (content.style.maxHeight) return content.style.maxHeight = null + content.style.maxHeight = `${content.scrollHeight}px` +}) \ No newline at end of file