How to create Responsive Accordion in HTML CSS & JavaScript

Поделиться
HTML-код
  • Опубликовано: 23 янв 2025

Комментарии • 46

  • @j_u_d_y3041
    @j_u_d_y3041 Год назад +1

    Wow~This is the ultimate accordion tutorial that I need! Thank you so much for sharing the process!

  • @nilamrakholiya5650
    @nilamrakholiya5650 2 года назад +3

    Thank you for this tutorial, I am searching for alternate open-close accordion logic and you provide exact same concept. thanks

  • @RobiulIslam-dn9mm
    @RobiulIslam-dn9mm Год назад

    Thank you. I badly needed this and after searching so many places, I found it at last.

  • @codingcinemax
    @codingcinemax 2 года назад +1

    Amazing Tutorial 👌👌

  • @randabadawy4170
    @randabadawy4170 2 года назад +1

    great job , this tutorial was usful to me . thanks

  • @programmermobile5413
    @programmermobile5413 2 года назад +3

    I really thank you very much for providing the source code so I can be inspired

    • @CodingLabYT
      @CodingLabYT  2 года назад +1

      No worries!, t will be uploaded soon.

  • @64_bit_coding
    @64_bit_coding 2 года назад +2

    You're so awesome!

  • @redaloui
    @redaloui Год назад

    Awesome, I hope you gather every sniper in one ui kit, or create ur own html template will love to buy it.
    Just focus not to deal heavily on javascript.

  • @deekshithpoojary262
    @deekshithpoojary262 Год назад

    MMMMM Finally i got the perfect FAQ that I was looking from last 2 days

  • @ianxven
    @ianxven Год назад

    thanks man, this helps alot

  • @aekungkuntorpon7057
    @aekungkuntorpon7057 2 года назад

    Thank you for this video 💯

  • @ignatjmudi8754
    @ignatjmudi8754 Год назад

    Bravo!!!!!!

  • @ritik_p_
    @ritik_p_ 2 года назад +1

    Great tutorial! Subscribed! Will the source code be up soon?

  • @Henry_Nunez
    @Henry_Nunez 2 года назад +1

    Gracias 👉🔔

  • @rayforever
    @rayforever 2 года назад

    Can you do a big project like cloud drive website just like gdrive or mega drive , your chatting website was awesome , and also a simple OTP verification page too
    Yours sincerely
    Subscriber and supporter

  • @BilalMohammed1988
    @BilalMohammed1988 Год назад +1

    Can you explain what do you mean by this "if (index1 != index2){ }" i have a confusion here.

    • @AboudASalam
      @AboudASalam Год назад

      the second forEach (in removeOpen function) will loop through all the accordions and by using the index2 we get the index of each accordion so we can use this condition and compare both the indexes (index1 and index2) to remove the class "open" from all accordions and reseting the height of each accordion to 0 except for the one that matches index1 (which we click on) to have one accordion opened for each click.
      if u still don't get it , open ur code studio and try it urself with printing both indexes in the console so u understand what do they stand for

  • @RealCatDev
    @RealCatDev 2 года назад +1

    Nice video

    • @CodingLabYT
      @CodingLabYT  2 года назад

      Thanks a ton

    • @RealCatDev
      @RealCatDev 2 года назад

      @@CodingLabYT np can you in the next video make login/sign in form with database?

  • @muygalan
    @muygalan 2 года назад

    Is it possible to embed an into this?

  • @musuhabadi2534
    @musuhabadi2534 Год назад

    your line 4 on js, you missed the dot (".header") . But why its still working ??

  • @davymaro
    @davymaro 2 года назад +1

    Gracious, I cant find the sourcodes for downloading

  • @tasneemayham974
    @tasneemayham974 Год назад

    Guys, does anyone know how to add a transition to the plus and minus to rotate? I tried, but couldn't figure it out. Thanks for any help!!

  • @siva5042
    @siva5042 2 года назад

    Please do voice over it will be more understandable

  • @64_bit_coding
    @64_bit_coding 2 года назад

    You should do custom context menu

  • @DarkaNight123
    @DarkaNight123 Год назад

    Tenía un problema con que las opciones del acordeón no se abrían al tamaño del contenido. Lo pude solucionar con lo siguiente:
    description.style.height = description.scrollHeight + "px" ;

  • @Архив-в3ц
    @Архив-в3ц Год назад

    16:08

  • @ClashRoyale-pt9zj
    @ClashRoyale-pt9zj Год назад

    muito bom

  • @cgianimationtv1828
    @cgianimationtv1828 2 года назад

    please 🙏🥺 code entertainment website front page layout and entertainment website single page ...thanks 👍

  • @hasibulhossainemon
    @hasibulhossainemon Год назад

    want this code

  • @RianaBeaCPena
    @RianaBeaCPena 2 года назад

    Hello can you please help me on how to code this? Thanks!
    Write a JavaScript function to get the month name from a particular date.
    Test Data:
    °console.log(month_name(new Date("10/11/2009")));
    °console.log(month_name(new Date("11/13/2014")));
    Output :
    "October"
    "November"

  • @tolgabrandt
    @tolgabrandt 2 года назад

    get bootstrap

  • @lifeiscrazy2146
    @lifeiscrazy2146 Год назад

    const accordionContent = document.querySelectorAll(".accordion-content");
    accordionContent.forEach((item,index) => {
    let header = item.querySelector('header');
    header.addEventListener("click", () =>{
    item.classList.toggle("open");
    let description = item.querySelector(".description");
    if(item.classList.contains(open)){
    description.style.height = '${description.scrollHeight}px';
    }else{
    description.style.height = "0px";
    item.querySelector("react-icons/ai").classList.replace("AiFillPlusCircle","AiFillMinusCircle");
    }
    removeOpen(index);
    })
    console.log(header);
    })
    function removeOpen(index1){
    accordionContent.forEach((item2,index2) =>{
    if(index1 != index2){
    item2.classList.remove("open");
    let des = item2.querySelector(".description");
    des.style.height = "0px";
    item.querySelector("react-icons/ai").classList.replace("AiFillPlusCircle","AiFillMinusCircle");
    }
    })
    }