Help With CSS-Powered Frontpage Layout Switching

Hello guys, Arron from RazorianFly here.

Website: https://www.razorianFly.com

Wondering whether anyone here can kindly help me. I’m currently using a customized version of the premium theme ‘Deadline’ from ThemeForest.

Found here:

https://themeforest.net/item/deadline-premium-wordpress-news-magazine-theme/117203

Basically, what I’m trying to achieve is two “switcher” buttons, the first named “Normal” displaying the current layout you see on the blog’s homepage today, and the second named “List” which would fade out (without pageload preferably) and display the site’s blog posts in a “list” (default blog layout) format, with pagination.

This “switcher” button would be left justified and located just above where our ‘Recent Posts’ block is now.

I have some of the code to achieve this, but I’m just not sure where I would need to put certain parts in order to achieve what I’m trying to do.

Current Layout Index.php – https://pastebin.com/szzTuPQj

Toggle/Switcher “Button” Code – https://pastebin.com/GstTR1Vp

Code to Create “Normal” Blog Layout (In-Page) – https://www.onextrapixel.com/2011/02/21/using-wordpress-custom-template-to-create-layout-with-different-sidebar/

Style.css – https://pastebin.com/BtUpyrHS

Any help with this would be greatly appreciated.

Thanks,
Arron