[Resolved] FAQ with toggles

[Farokh]

Hi, how can I make FAQs with toggles?

[Tom]

This plugin might help: https://en-ca.wordpress.org/plugins/jquery-collapse-o-matic/

[Farokh]

Thanks, it’s great, but can you help with some short css to move the BUTTONS to the right side of the page (RTL)?

.my_button {
background: #00A5F2;
color: white;
padding: 5px;
width: 130px;
text-align: right;
}

[Tom]

float:right might be what you’re looking for.

You can place your content in columns: https://wordpress.org/plugins/lightweight-grid-columns/

[Farokh]

float: right makes buttons stand in a line one after another (on the right side of the page of course), but I need them to stand vertically one above each other (on the right side)

[Tom]

Then using columns might be your best bet.

Otherwise you’ll need to place your buttons inside a div which is floating to the right:

<div style="float:right">
    buttons in here
</div>

[Farokh]

Like this!? Cuz its not working

.my_button {
background: #00A5F2;
color: white;
padding: 5px;
width: 130px;
text-align: right;
}

.my_button.colomat-hover{
background: #999;
text-decoration: none;
}

.my_content{
margin-left: 0;
text-align: right;
}

[Farokh]

How Can I use coloumns?

[Tom]

By using a plugin like this: https://wordpress.org/plugins/lightweight-grid-columns/

Your CSS depends on the HTML structure. I’m assuming you need float:right instead of text-align:right;

[Farokh]

Hi, Tom

Lightweight Grid Columns is Great!

But, how can I have the content in the columns float right (rtl) using simple CSS?

[Tom]

You could try this:

.inside-grid-column {
    text-align: right;
}

[Farokh]

Thanks, worked perfect

How can I learn more about working with CSS in general? Any suggestions?

[Tom]

Just general practice. Codecademy is also a good learning resource.

[Author]

Posts