Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design accordion calendar

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #259822
    leemii17
    Participant

    I am trying to make the accordion show up but it won’t.

    here is the link to my CodePen:

    https://codepen.io/Leemii17/pen/RZXWGM

    I can’t find the error

    #259824
    Beverleyh
    Participant

    Might have something to do with the malformed table structure which I think is what’s causing nextElementSibling to return as null. You shouldn’t have a div as a direct child of tr.

    If you enclose the .panel div inside the .accordion td (and yes, you’ll need to fix the way it looks in the CSS), you could then change your JS from this;

    var panel = this.nextElementSibling;
    

    To this;

    var panel = this.children[0];
    
    #259950
    leemii17
    Participant

    can you show me how to enclose the .panel div inside .accordion?

    I am a beginner.

    https://codepen.io/Leemii17/pen/RZXWGM

    #259951
    Beverleyh
    Participant

    It just means that you should put the div elements inside the td element. Read this for more info and examples https://css-tricks.com/using-divs-inside-tables/

    However, if you’re a beginner with the basics of HTML, you’ll really have some work cut out for yourself when it comes to fixing the CSS.

    Then again, you might be able to accept the resulting visual affects after this change, but if you can’t, you’ll need to research and learn more about CSS, or consider hiring somebody to do the work for you. Unfortunately, we aren’t here to do your work for you.

    #259952
    JeroenR
    Participant

    Just change the code nearby this:

    <td class="accordion">1 </td>
    

    like this: https://codepen.io/jeroenreijs/pen/EwxRBM

    and you will see what @beverleyh is talking about.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design’ is closed to new topics and replies.