Adding accordions to a table

There are a few issues I notice, but you should address the most important one first. The main issue is that this plugin’s JavaScript file isn’t loading. There is another accordion JavaScript file that is loading though, so it looks like you may have a conflict there. Note this file: https://upsidefoundation.ca/wp-admin/js/accordion.min.js?ver=3.9.2. This is not this plugins JavaScript file. Do you have another accordion plugin installed and activated? Are accordion shortcodes built into the theme?

I actually did not build this site but this is still a bit surprising. I do not see any other accordion plugins installed.

The theme is built on the Genesis framework. I am not aware of an accordion shortcode in that framework and a Google search did not reveal anything. Perhaps I have overlooked something. Are you familiar with the framework?

I’m not familiar with that particular theme, but after looking I can’t seem to find if it includes accordions. Either way, this plugins JavaScript file isn’t loading properly. I assume you are wrapping your [accordion-item] shortcodes in an [accordion] shortcode? The presence of the [accordion] shortcode determines whether to load the JavaScript file.

Would it be possible for you to post the content from your content editor for that page?

I did not have the [accordion] shortcode present so that solved the first problem. Thank you for the suggestion.

The issue regarding the CSS being ignored is still there.

I have the following CSS in my stylesheet but it doesn’t seem to be loading. It was working prior to creating the table.

.accordion {
    border: 1px solid #969090;
    margin-bottom: 20px;
    background: #fff;
}
.accordion-title {
    border-top: 1px solid #dbdbdb;
    margin: 0;
    padding: 20px;
    cursor: pointer;
}
.accordion-title:hover {}
.accordion-title.open {cursor: default;}
.accordion-content {padding-bottom: 20px;}

Also, I’ve noticed that when the accordion opens in a table, the whole window “shakes” and the accordion to its left/right doesn’t look quite right. Do you see what I mean?

I can see in the web inspector that the CSS you have outlined above is in fact being applied (note the border-top on your titles).

As for the funny alignment of the tables, you will have to add valign="top" to your <td> tags. You’ll also likely want to reset the default table cellpadding and cellspacing.

I’m not sure what you mean by “shakes”.

Is there a particular reason you are adding a single accordion item to each table row like that? If you simply want two columns of accordion items there are much better ways to achieve this, without using tables for layout.

Thanks for the speedy response.

No there is no particular reason for using the table and I am definitely open to your suggestions. I am aiming to create a table with 2 columns and 3 rows.

Are you comfortable with HTML and CSS? The theme you’re using should be based on some sort of grid structure that you should be able to tap into. As I said, I’m not familiar with that theme, so I can’t help much there.

Alternatively, you could use some simple HTML and CSS like this:

HTML

<div class="row">
    <div class="col half">
        Column one
    </div>
    <div class="col half">
        Column two
    </div>
</div>

CSS

.row,
.col {
    box-sizing: border-box;
}
.row {
    width: 100%;
    margin: 0 auto;
}
.row:before,
.row:after {
    content: " ";
    display: table;
}
.col {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}
.half {
    width: 50%;
}

I haven’t tested this, but you should be able to tweak it to your requirements.

Thank you for the code and sorry for the delay in getting back to you.

I tried that code out in the following manner:

[accordion]
<div class="row">

    <div class="col half">
        [accordion-item title="Title of accordion item one"]Drop-down content one goes here.[/accordion-item]
    </div>
    <div class="col half">
        [accordion-item title="Title of accordion item two"]Drop-down content two goes here.[/accordion-item]
    </div>
</div>
[/accordion]

Based on what is visible here – https://upsidefoundation.ca/become-a-donor/accordion-test/ – this is not the correct way to mix the [accordion] shortcode and the HTML. Could you please explain what I’m doing wrong here?

Thanks.

Try this:

<div class="row">
    <div class="col half">
        [accordion]
            [accordion-item title="Title of accordion item one"]Drop-down content one goes here.[/accordion-item]
            [accordion-item title="Title of accordion item two"]Drop-down content two goes here.[/accordion-item]
        [/accordion]
    </div>
    <div class="col half">
        [accordion]
            [accordion-item title="Title of accordion item three"]Drop-down content three goes here.[/accordion-item]
            [accordion-item title="Title of accordion item four"]Drop-down content four goes here.[/accordion-item]
        [/accordion]
    </div>
</div>

Make sure you add this on the Text side of the editor.

Thank you! This looks great.

Is there anyway specify the height of the accordion. If you look here – https://upsidefoundation.ca/become-a-donor/accordion-test/ – you will see that the accordions in the bottom row have uneven heights because of the varying lengths of the titles.

You can target all the titles in CSS using:

.accordion-title {}

Of you can add an ID to only target specific titles:

[accordion-item id="specific-title" title="Title goes here"]...[/accordion-item]

#specific-title {}

And what would the specific code be that I use to specify the height?

In your CSS file:

.accordion-title {
    height: ***px;
}

Replace *** with the height you want all the titles to be.

The code works great when I apply it to all accordion items but it doesn’t seem to be working when I use it with IDs. Could you take a look and see if I’m doing something wrong? Once again, I appreciate all of your help tremendously.