How to have accordion triggers open by default on medicus template

[Marc_Narrative]

Hi I’m getting a bit lost with this so hope someone may be able to help.

Im adapting the medicus template and on the team functionality i would like to have the accordion triggers open without needing to hover over them, so that the orange overlay is showing all the time, (see the left of the 3 i’ve hovered over in this screenshot)

And then when the user clicks it opens the accordian text. I have text on the image (& more on the accordian which works fine), but can’t work out where to find the overlay animation for the 3 triggers?

I’d also like to find how i can make the 3 triggers/accordians centre aligned in the container as it seems they are stuck to the left - and i’ve tried everything that i thought related to it in both container and trigger image so must be missing something

Lastly is there a way i can make the text on that left trigger image to not be capitals as there doesnt seem to be a setting that i can see & its not written in caps.

Many thanks for any help

[Marc_Narrative]

Update I’ve worked out some questions and changed approach a bit. The client wants 3 customer profiles as the first section (photo & text description & case study for each) in 3 columns. The case study is far too text much for mobile so i’ve settled on using the accordion and triggers with the text underneath to display the text description. I’ve learnt how to keep the 1st one open, but i’d like to open the text by hovering rather than just clicking ideally so i can lose the sub text, but I know the only options are clicking. i found this tutorial post - Hoverbox on image mouseover - #4 by Paul_Towney-Jones and have added a css class for the trigger/image to be hoverbox & the text below to be hoverbox-hover-container, and copied the css to the top of my css code file, but it doesnt seem to be opening the text while hover so im assuming its because im inside an existing preset. I’ve also tried adding a button to click for case study to open an overlay, which kind of works but seems to cause issues with no close button showing (its set in options) & strange behavior with moving the button and any other text i click on to underneath the accordian container. So this screenshot is the best i’ve got so far. -

Does anyone more experienced have any other suggestions to a better approach i could take to achieve this request.

Here’s is a couple of the text to explain what they want and thanks for anyone who may be able to shed any light

---

2. About You

2a. “I can’t take a day off”

You have a busy lifestyle and/or commitments which you must deliver. When pain stops you from being able to complete these tasks, it can have a knock-on effect which may have a significant cost. Being proactive about your health helps you to manage these challenges and to maintain the quality of life of those who matter. Treatment can help with issues including posture correction, pain relief, migraine prevention and management.

Case Study: Rita Schindler - Professional Harpist - www.ritaschindler.com

Image: RitaSchindler.png

“As freelance musician I can’t afford a day off work. I’ve been coming back for treatments to James for years as he solved my chronic migraine, back pain and muscle knots, as well as realigning my whole body. I simply couldn’t go on working without his expert care as my playing career puts a lot of pressure on my body. I’ve been recommending James to all my students and colleagues who’ve been suffering with aches and pains.”

2b. “I want to perform at my best”

You are a competitive athlete. You must peak at the right time to perform at your top level, while minimising your risk of injury. When problems do arise, you need to recover quickly and safely, and to protect against repeat injuries. Treatment can help to maximise performance, increase endurance capacity and prepare you for winning!

Case Study: Oliver Blake - Personal Trainer - @oliverblakefitness

Image: OliverBlake.png

“I had a persistent left calve injury for over two months that flared up within 2 miles every time I went for a run causing a severe cramp-like pain. I saw James the week before a big event - after 1 hour of treatment the problem was gone. I did a 40 mile run that weekend with not a single issue with my calves. Very professional and holistic environment. I would definitely recommend and I now go to James before and after every race for treatment both preventive and restorative.”

---

[chedched]

Can you provide a link to your current draft?

[Andre]

Can you provide a link to your current draft?

Also, the six-digit website ID for the Sitejet team would help. We can have a look for you as well.

[Marc_Narrative]

Thanks so much @chedched & @Andre, and apologies for the delay. I decided to start again with it and use the same accordian for that element and i’ve just got now something i can send for feedback. I’m not 100% happy with it, but im effectively working for free now as the interface has been quite a challenge coming from Divi & still a lot to get my head around. If you still have chance to cast your eye & have any suggestions at all to make a better design then i’d be very open & appreciative to those. The only thing i couldnt work out aside from improving the aesthetics, was how to show more of the top of the banner (and not move the menu down or expand the sides). I tried adding more padding to the bottom, but this seems to be the maximum i can add until it starts to expand the sides. The only solution i could think would be to space to that image itself in an image editor, but im sure there must be a way of doing this simply in the interface that i haven’t learnt yet. For my original question of how to approach the accordian though, i think what i’ve come up with should hopefully address the request, and thanks again for your reply. Here’s the preview link - http://1f8142-5d3a9.preview.sitejet.io/ & the 6 digit id would be 381865.

[chedched]

@Marc_Narrative

The only thing i couldnt work out aside from improving the aesthetics, was how to show more of the top of the banner (and not move the menu down or expand the sides).

What exactly is the “top banner”? Cool you figured out the issue with the accordion :).

[chedched]

One quick win for improving the overall aesthetics of a site is to pay close attention to consistency.

Just a few observations:

• You mix rounded corners (buttons, “testimonial”-boxes) and non-rounded corners (contact input fields, “latest news” boxes).
• Some sections take up the entire width of the site (navbar, “bookings”, “latest news”), while others don’t (“how can I help you”, “testimonials”).
• Some buttons have small padding (“make an appointment”), while others have big padding (“submit”).
• Some sections have dividers with straight lines, while others look “painted” (I forgot the exact name for this separator).
• You combined three pictures into a single one; that’s quite a lot for the eye to process.
• Some images use shadows (“faqs”), while others don’t (e.g., the picture of the doctor).
• Some headlines are underlined (“book an appointment”), but most are not.

Maybe you would like to look into this; I think you have a solid foundation that can be turned into a great result with not too much effort.

One other thing: If you need to explain to a website visitor how to use it (“Click the profiles below”), it’s bad UX ;). Most of the time, this happens because the designer falls in love with a solution that just isn’t intuitive for visitors. We designers don’t like to hear this, but most of the time, it really pays off to copy a working concept from another (perhaps bigger) site and adapt it.

[Marc_Narrative]

Ah thank you @chedched Christian! That is super useful and much appreciated.

Re the top banner - thats the 3 images in one that you mention - I totally agree and it was a real pain to use (sent by the marketing guy who supplied the rest of the web design requests He wanted it in the middle of the header which i tried to do on that first draft, then realised it just looks bad and didnt seem to work on mobile, so started a new project with that as the menu banner from a educational template. Id like to show more of the top of it on both mobile & desktop but this may be as far as i can get with that image.

And im 100 % with you on the other time hog (for me) which was the how i can help you section. I hate using descriptions but i put that one in as i know that 3 profiles is a non negotiable as he see’s it as something other websites are missing in defining the customer, but im hoping to take that line out. The other challenging thing was the underline make an appointment/booking you rightly pointed out but theres nothing in the html of that 8to2 booking widget embed, to change what that says, or how it displays, so i added the contact form to balance it out and figured i’d best add an explanation to avoid customers emailing the client to book. I did find a couple of booking options to suggest to the client with better embeds, but i can forsee too much admin with making the transfer.

I’ll make all the other changes you suggested though as they are all things i missed. The one that i did see but couldnt work out was how to remove the shadow from the faq image. It doesnt seem to be mentioned anywhere as all the obvious choices in style are turned off. Maybe its because its a preset from the template and i used the only other image i had which was landscape as opposed to porttrait. Unless you know the solution i’ll probably switch to a stock portrait image to address that one for now.

Again thanks so much for your feedback. I’m only getting a mates rate £500 for this site as he said the previous builder who went awol was quoting that, and it sounded super simple portfolio until he sent the text but it’s the first site on sitejet so i’ve been doing some learning too I’m hoping they will be ok with my font choices as baskerville for headings and ariel for main didn’t seem a strong choice with so many other fonts available I’ll be sending it for feedback in a bit once set the white label up so any more suggestions are much appreciated

[chedched]

Cool. I noticed that you have already figured out how to remove the shadow from the FAQ image.

I don’t know if you’re a professional designer or if you create websites occasionally, but we run an agency that charges a flat fee of £450 for each website, as long as customers also purchase a monthly maintenance package (ranging from £25 to £90). We have a few partners who enjoy eliciting requirements and project management more than actual coding and maintenance, so they entrust us with building and maintaining the websites they sell. If this interests you in the future, feel free to send me a PM.

(@Admins: I am not attempting to sell a solution for the issues mentioned in this thread; it’s just a use case where collaboration would generally make sense. If you find this post inappropriate, please feel free to delete it .).

[Marc_Narrative]

Thanks Christian