Hi, I’d like to achieve something like in apple’s website, in which when a (text) link is clicked, then an area expands below it and shows more content. The effect is similar to a dropdown content modal, only this one expands not just a small box area, but the whole page width expands/drops. I tried using and configuring the content area dropdown but couldn’t achieve what I want.
Kindly help.
Hi @arufi
Thanks for writing in! You can also check Accordion element in Cornerstone and see if that meets your expectations. You can see a working example from here (http://demo.theme.co/integrity-1/shortcodes/accordion/).
Also provide us with the page URL of your example, so that we can check your issue.
Thanks!
Hi. Thanks a lot. How can I adjust the style of the accordion? I’d like to remove the border or shadow around the box.
Hi There,
To remove the border, please add this custom CSS under Theme Options > CSS:
.x-accordion-heading .x-accordion-toggle,
.x-accordion-heading,
.x-accordion-group,
.x-accordion-inner {
border: none;
}
To remove the box shadow, please add this:
.x-accordion-group {
box-shadow: none;
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.