DECKDigitalSolutions Posted November 15, 2023 Share Posted November 15, 2023 Hello, I'm wanting to create a list of headings on the left hand side of the page, and when each one is clicked, the body text will reveal on the right hand side. I'm thinking of possibly using an accordion but not sure the best way to go about it. Or if its even possible. It will be used for a services page. I've attached a mockup example. Thank you Link to comment
tuanphan Posted November 18, 2023 Share Posted November 18, 2023 Hi, We can use Text Blocks + Custom code to achieve this First, left side, you add a Text Block with 5 Text link: #heading1, #heading2,...#heading5 Right side you add 5 Text Blocks Then share link to page, we can check & give you code (I solved some same cases) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DECKDigitalSolutions Posted November 23, 2023 Author Share Posted November 23, 2023 On 11/18/2023 at 2:07 PM, tuanphan said: Hi, We can use Text Blocks + Custom code to achieve this First, left side, you add a Text Block with 5 Text link: #heading1, #heading2,...#heading5 Right side you add 5 Text Blocks Then share link to page, we can check & give you code (I solved some same cases) Hey Tuanphan, Sorry about the delay, I've just done that now, it's right down the bottom of the homepage. the site link is sunnysidephysio.squarespace.com password is 'sunny' Thank you Link to comment
Solution tuanphan Posted November 26, 2023 Solution Share Posted November 26, 2023 On 11/23/2023 at 10:41 AM, DECKDigitalSolutions said: Hey Tuanphan, Sorry about the delay, I've just done that now, it's right down the bottom of the homepage. the site link is sunnysidephysio.squarespace.com password is 'sunny' Thank you Add this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // heading 1 $('a[href="#heading1"]').hover(function(){ $(".fe-block.fe-block-yui_3_17_2_1_1700709493189_14189").addClass("show"); }, function(){ $('.fe-block.fe-block-yui_3_17_2_1_1700709493189_14189').removeClass("show"); } ); // heading 2 $('a[href="#heading2"]').hover(function(){ $(".fe-block.fe-block-3fc400eb3741e80f8db4").addClass("show"); }, function(){ $('.fe-block.fe-block-3fc400eb3741e80f8db4').removeClass("show"); } ); // heading 3 $('a[href="#heading3"]').hover(function(){ $(".fe-block.fe-block-e87207aef5ec78ef9dd5").addClass("show"); }, function(){ $('.fe-block.fe-block-e87207aef5ec78ef9dd5').removeClass("show"); } ); // heading 4 $('a[href="#heading4"]').hover(function(){ $(".fe-block.fe-block-b928dc2f58ef1cbb9859").addClass("show"); }, function(){ $('.fe-block.fe-block-b928dc2f58ef1cbb9859').removeClass("show"); } ); // heading 5 $('a[href="#heading5"]').hover(function(){ $(".fe-block.fe-block-d3bec26402b72a413fd0").addClass("show"); }, function(){ $('.fe-block.fe-block-d3bec26402b72a413fd0').removeClass("show"); } ); }); </script> <style> .fe-block.fe-block-d3bec26402b72a413fd0, .fe-block.fe-block-b928dc2f58ef1cbb9859, .fe-block.fe-block-e87207aef5ec78ef9dd5, .fe-block.fe-block-3fc400eb3741e80f8db4, .fe-block.fe-block-yui_3_17_2_1_1700709493189_14189 { opacity: 0; transition: all 0.5s ease; } .show { opacity: 1 !important; transition: all 0.5s ease; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DECKDigitalSolutions Posted November 27, 2023 Author Share Posted November 27, 2023 On 11/26/2023 at 10:59 AM, tuanphan said: Add this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // heading 1 $('a[href="#heading1"]').hover(function(){ $(".fe-block.fe-block-yui_3_17_2_1_1700709493189_14189").addClass("show"); }, function(){ $('.fe-block.fe-block-yui_3_17_2_1_1700709493189_14189').removeClass("show"); } ); // heading 2 $('a[href="#heading2"]').hover(function(){ $(".fe-block.fe-block-3fc400eb3741e80f8db4").addClass("show"); }, function(){ $('.fe-block.fe-block-3fc400eb3741e80f8db4').removeClass("show"); } ); // heading 3 $('a[href="#heading3"]').hover(function(){ $(".fe-block.fe-block-e87207aef5ec78ef9dd5").addClass("show"); }, function(){ $('.fe-block.fe-block-e87207aef5ec78ef9dd5').removeClass("show"); } ); // heading 4 $('a[href="#heading4"]').hover(function(){ $(".fe-block.fe-block-b928dc2f58ef1cbb9859").addClass("show"); }, function(){ $('.fe-block.fe-block-b928dc2f58ef1cbb9859').removeClass("show"); } ); // heading 5 $('a[href="#heading5"]').hover(function(){ $(".fe-block.fe-block-d3bec26402b72a413fd0").addClass("show"); }, function(){ $('.fe-block.fe-block-d3bec26402b72a413fd0').removeClass("show"); } ); }); </script> <style> .fe-block.fe-block-d3bec26402b72a413fd0, .fe-block.fe-block-b928dc2f58ef1cbb9859, .fe-block.fe-block-e87207aef5ec78ef9dd5, .fe-block.fe-block-3fc400eb3741e80f8db4, .fe-block.fe-block-yui_3_17_2_1_1700709493189_14189 { opacity: 0; transition: all 0.5s ease; } .show { opacity: 1 !important; transition: all 0.5s ease; } </style> Thank you so much! this worked perfectly. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment