help with accordion toggle

AllisonAltus
Top Contributor

Hello, i am looking for help when using the accordion toggle module on a webpage. 

 I have attached a screenshot to show what i am trying to do.  I would like the drop down text to expand along to the right (red arrow) rather than just be restricted to just under the image. How do I make this happen? I have very little html/coding knowledge.  Can i just paste some code somewhere?

Thank you 

Allison 

 

accordian module.JPG

0 Upvotes
5 Replies 5
DanielSanchez
Key Advisor

Hi @AllisonAltus ,

 

This layout is column based, so the text is below the image.

 

Apparently it is possible to expand the div to open the content, but without a good knowledge of JavaScript and CSS, it is difficult to apply as it is already more advanced as you will have to change a CSS value or the DIV class when opened so you can have a new stylization.

 

If you can make DIV change the class when opening content using JavaScrip, then you can create a new CSS styling for that content. 

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

AllisonAltus
Top Contributor

Hi @DanielSanchez ,   thank you for your quick reply. Does that involve amending the css code for the accordion module? I have access to that - i just don't know what code to add it ? 

Thanks

Allison

0 Upvotes
DanielSanchez
Key Advisor

Yes, but maybe need an function Java Script to change the class of div, how i mentioned before. Not only CSS. Need search one expert to create this code for you.

 

Best regards!

0 Upvotes
AllisonAltus
Top Contributor

Ok thanks for clarifying. 

 

Just one other question - how would i reduce the size of spacing between the columns/modules on this page? The red line in the screenshot shows where i am trying to reduce the spacing.

 

accordian module 2.JPG

0 Upvotes
DanielSanchez
Key Advisor

Hi @AllisonAltus ,

 

This space is Margin and Padding in CSS. If you sent link of this page, i can found what style exatcly you need modify. 🙂

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!