Change alignment on click button (for live site)

Design help Custom code
1

Hi all,

Just wondering if it is possible to change the alignment on click or a button for a live website? A client is asking for everything right aligned… but most people will find this hard to read.

Hoping there’s an easy one click solution that anyone who tries to read right aligned text and finding it hard can click and it will be right aligned… apart from doubling the website with left aligned text…

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @WrightDesigner,

You could add an event listener to the button like this in Page Settings > Custom Code > Before </body> tag:

$('#button').on('click', function() {
$('#paragraph').toggleClass('rtl');
});

(Make sure you replace ‘#paragraph’ with the ID of the text you want to change)

Then add a CSS class to Project Settings > Custom Code > Head Code:

.rtl {
  direction: rtl !important;
}

Hope this makes sense! Here’s a CodePen to demonstrate: https://jsfiddle.net/d3xkacnu/6/

1 Like
3

Hi, just saw this thanks for your reply! I’ll try this out :slightly_smiling_face:

1 Like
4

Hi there, I’m probably doing something wrong but doesn’t seem to be working for me :-/

Screenshot 2023-01-28 at 16.16.05
Screenshot 2023-01-28 at 16.16.05432×774 24.2 KB

Button is named with the class “ra-toggle” and text block is name with the class “toggle-text”.

Any help is most appreciated.

5

Hi @WrightDesigner,

You should be able to fix this by changing the script tags to style tags for the CSS:

<style>
.rtl {
  direction: rtl !important;
}
</style>

and make sure if you’re using a class (ra-toggle/toggle-text) in jQuery that you use a . before the class name like so:

<script>
$('.ra-toggle').on('click', function() {
$('.toggle-text').toggleClass('rtl');
});
</script>