Accordion styling questions due to original code being obsolete

Hello,

Some accordion code became non-functional on one of the website’s pages possibly due to code being out-of-date…?

(I checked WPBakery Page Builder, and Legacy X Integration is enabled.)

I was able to copy functioning code from another page, but I have two requests:

  1. The space between the accordion items is much larger on the new page. I would like to reduce them.
  2. How would I go about assigning a different color to each accordion item? On the “old” one, I used a format like this :
    `
` The accordion format that I am using now that functions properly is: ` [accordion_item title="Step 1: Topic"] Content [/accordion_item] ` I am not sure how to assign styles to this format. (I have a child theme, but it appears many of those lines are now obsolete.)

Thank you in advance for your assistance!

P.S. I haven’t posted here for awhile, so I will need to figure out how to post my client’s website links privately… I selected the lines below and clicked “hide details” so hopefully that worked! :slight_smile:

Summary

Webpage with close spacing of accordion items (which I want on another accordion): http://jvdinc.com/faq/

Summary

Webpage with accordion that no longer opens: http://jvdinc.com/expertise/

Summary

New webpage I am working on using accordion code from FAQ page: http://jvdinc.com/test-accordion/

Summary

Requires password: ROCKET

Hi @SnowWolf,

Thank you for writing in, we can troubleshoot your accordion shortcodes and style it with a custom CSS, but that is kind of tedious for you, right?

So I would recommend starting utilizing the features of the Theme and Cornerstone moving forward, that means I advise to rebuild those pages in Cornerstone, this may sound time-consuming but this will save you lots of time in the future.

Or if rebuilding the pages is not an option, you can utilize the Global Block feature this means you need to create your Accordion section as a Global Block, and then use the Global Block shortcode for inserting that Accordion section on your page. This way your accordion is easier to manage, rather than having a long accordion shortcode on your page.

Regarding the accordion not opening issue, please CLEAR your W3 Total Cache and other caching feature the site might have.

Let us know how it goes,
Cheers!

Hello,

Actually, applying CSS would not be tedious for me. I rarely work on this site — and when I do, I just creat basic pages without any special functionality, i.e., accordions. So, in this case, I would appreciate it if you could assist me with applying a color to each individual accordion to we can get the site back to its original format.

Note: I was successful in resolving the issue of the extra space below each accordion item. I had some spaces in the code which need to be deleted. Simple, right? :slight_smile:

(Oh, and I did clear the W3 cache again, but it did not change/improve the page that had that problem. It would have been nice if it did, since the colors are already assigned over there…)

By the way, I have the working accordion as the live page now. I have renamed the one with the colors expertise-old/ . The one that is currently active and needs the colors is expertise.

Summary

This one has the colors
http://jvdinc.com/expertise-old/

Summary

This is live now and has good spacing, but no colors
http://jvdinc.com/expertise/

Thank you for your assistance — I look forward to hearing back about the CSS to assign color to each accordion item!

Hi @SnowWolf,

If you’re using accordion shortcode then you can assign a class to each of your accordion item, let’s say first-acc-item to your first item, second-acc-item to the second and third-acc-item to the third and so on (see example)

[accordion_item class="first-acc-item" title="Step 1: Topic"]Content[/accordion_item] [accordion_item class="second-acc-item" title="Step 2: Topic"]Content[/accordion_item] [accordion_item class="third-acc-item" title="Step 3: Topic"]Content[/accordion_item]

After assigning a class you can add the following CSS in the Theme Options > CSS to give colors to your accordion items:

.first-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(174, 227, 253);
}

.second-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(138, 220, 250);
}

.third-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(102, 253, 109);
}

Hope this helps!

Thank you for the code. But the color only displays when I click on the heading and the toggle opens. And only on some of them. We would like the color to display on all the headings also when they are closed.

The colors displayed while closed and open looked like this (made years ago, which is now outdated accordion code) - this is what we are hoping to accomplish:

The now operational accordion, with header area colors that only display when an accordion section is open is on page: expertise.

(test-accordion page is no longer being used.)

Thank you again for the code – just looking for one last step needed to have the colors display at all times! :slight_smile:

Summary

Webpage with accordion that just needs colors displayed while accordion sections are closed and open: http://jvdinc.com/expertise/

Hello @SnowWolf,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.first-acc-item .x-accordion-toggle.collapsed {background-color: rgb(171, 225, 251) !important;}

.second-acc-item .x-accordion-toggle.collapsed {
    background-color: rgb(138, 220, 250);
}

Thanks.

Thank you for the new code. Unfortunately, there are still issues:

Customizer preview only shows color displaying on collapsed accordions item 1 and 7. The rest are still white. I will provide a screen shot.

Expertise page where the accordion is does not show any change (no colors displayed on accordion while collapsed) with the new code format — I’ve cleared cache and also opened in incognito window. The accordion on the page is not displaying any colors when closed.

Note: The Expertise page DOES show the two collapsed accordions item 1 and 7 with color on the actual page ONLY when I am logged in as WordPress Admin — not when I look at it as a non-loggedin user.

Do you have any troubleshooting advice?

Summary

http://jvdinc.com/expertise/

Customizer View

View on Live Site (not logged into WP, cleared all cache, incognito/private window - also tried regular window.

Hey @SnowWolf,

To fix the issue please replace the previous code with the following:

.first-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(174, 227, 253) !important;
}

.second-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(138, 220, 250) !important;
}

.third-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(102, 253, 109) !important;
}

.fourth-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(102, 253, 109) !important;
}

.fifth-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(102, 253, 109) !important;
}

.sixth-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(102, 253, 109) !important;
}

.seventh-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(102, 253, 109) !important;
}

.eighth-acc-item .x-accordion-heading .x-accordion-toggle {
    background-color: rgb(102, 253, 109) !important;
}

I checked your page and I see you’ve not given the classes to all of your accordion elements, please give each of your accordion shortcode a respective class so the above code applies to all items. Currently I only see three classes given to your accordion element i.e first-acc-item, second-acc-item and seventh-acc-item. Please give all of your accordion elements a class e.g third-acc-item, fourth-acc-item and so on.

Hope this helps!

Hello,

I checked the page and all of the “acc-items” were there, first through eighth. I will paste the entire page code:

Full Code on Expertise page. Sorry for pasting so much here - the system would not let me upload a document.


[vc_row no_margin="true" padding_top="0px" padding_bottom="0px" border="none"][vc_column width="1/1"][custom_headline type="center" style="margin-top: 0px; margin-bottom: 20px; color: #36648B;" level="h1" looks_like="h3" accent="true"]Expertise[/custom_headline][/vc_column][/vc_row][vc_row][vc_column width="1/2"]
[custom_headline type="center" style="margin-top: 0px; margin-bottom: 20px; color: #36648B;" level="h2" looks_like="h4"]
ASIC Expertise From Design Through Production[/custom_headline][line]
[text_output]For more than 30 years, JVD has been supplying the electronics industry with high performance, cost effective, mixed signal ASIC solutions. JVD has developed a reputation of quality and cost consciousness. Our core engineering team alone boasts more than 300 years of Analog IC design experience.

We take the words “Application Specific” seriously. We believe the “cookie cutter” approach of force-fitting a mixed signal design into a standard cell library may not always provide the best result for our customers. At JVD, we offer fully customized designs that can be targeted at various Bipoloar, CMOS, BCD, BiCMOS and MEMS processes, guaranteeing you the best cost/performance match for your application.
[/text_output][/vc_column]

[vc_column width="1/2"]
[custom_headline type="center" style="margin-top: 0px; margin-bottom: 20px; color: #36648B;" level="h2" looks_like="h4"]
Typical Design Flow[/custom_headline][line]

[accordion]
[accordion_item class="first-acc-item" title="Step 1: Establishing Specifications"]
Customers meet with JVD engineers to review the requirements of the application. Design methodologies are discussed, including those that will facilitate the successful testing of the final chip. When the specification is completed, including functional blocks, pin-outs, packaging, process requirements, and critical performance parameters, a quotation is made that then forms the basis for a development contract.[/accordion_item][accordion_item class="second-acc-item" title="Step 2: Design and Verification"]
JVD uses the latest analog simulation and verification tools from leading suppliers to mitigate any risk. When possible, the critical aspects of the design are prototyped prior to releasing the design to layout. It is important to verify that the design performs correctly in a real application environment as well as in simulation.

Upon completion of the design and verification phases, a milestone meeting with the customer takes place. Upon customer approval, the design and then the project moves forward to the layout phase.
[/accordion_item][accordion_item class=“third-acc-item" title="Step 3: IC Layout"]
At this stage, any special ESD cells required by the design are generated as well as any unique I/O structures. Mixed signal layout is tricky and often managed by hand to ensure optimal circuit performance and density. When the layout is complete, the device signal chain analysis is simulated under different process, temperature and voltage parameters, with particular attention paid to noise, capacitance, and parasitics. With a milestone approval from the customer, a GDSII “tape” is generated for the mask production.
[/accordion_item][accordion_item class=“fourth-acc-item" title="Step 4: Mask Generation"]
Mask generation typically takes place at the silicon foundry. A mixed signal chip may have as many as 25 -30 masks (photographic plates used in the process). An inspection of the masks is made by JVD before the masks are released to foundry.
[/accordion_item][accordion_item class=“fifth-acc-item" title="Step 5: Manufacture Initial Samples"]
With the release of the masks, the foundry produces a batch of engineering prototype wafers – usually 6 to 12 wafers. Usually, some wafers are retained for setting up probe and test in preparation for mass production. The others are processed into individual die and assembled into packages for ease of qualification of the part. The packages are supplied to the customer to verify their operation in the customer’s application.
[/accordion_item][accordion_item class=“sixth-acc-item" title="Step 6: Test Development"]
Although identified here as Step 6, test development is a parallel activity that begins at the same time as the Design (Step 2), as it can take as long or longer to complete as the chip design itself. Test hardware and software must be at or near completion when the first prototype silicon arrives. Both the silicon and the automatic production tester undergo simultaneous debugging.
[/accordion_item][accordion_item class="seventh-acc-item" title="Step 7: Production"]
Once the initial samples have been qualified at the third and last milestone meeting, JVD prepares the tooling and probe test cards to manufacture and deliver production silicon. Throughout the product life, JVD’s technical and manufacturing experts support the design and manufacturing requirements of the product. JVD maintains inventory to ensure timely delivery of parts.
[/accordion_item][accordion_item class=“eighth-acc-item" title="Step 8: Second Sources,
Next Generation Products"]
Often, once a product is in production, an additional wafer fab is brought on as a second source to ensure secure deliveries of high volume products. The second source fab usually requires a new set of masks and JVD handles the adaptation of the design and qualification for the slight differences in process. In addition, it is often the case that JVD will design variations of the ASIC for the customer’s family of products. Some of JVD’s products have been in continuous production for over fifteen years. Eventually a new design may be required to take advantage in advances in technology and JVD ensures a seamless transition into the new product. JVD is always seeking to improve performance or reduce cost of custom ASICS’s in next generation products.
[/accordion_item][/accordion][/vc_column][clear][/vc_row]

I copied the code you gave me and put it in the Customizer and in Customizer Preview it shows only 1, 2, and 7 with colors.
When I view the page while NOT logged into WordPress, I do see 1, 2, and 7 with colors, but only in open mode, not in closed mode.

  • When I look via Inspector, I can see why you think I had not given the classes to the other items.

Screenshot here:

Summary

Any ideas why the browsers are not receiving the information about the “missing classes” which are actually on the Expertise page? (I’ve tried Chrome, Firefox, and Safari.)

Thank you,
Dora

Hi @SnowWolf,

At first, I couldn’t find it either so when I formatted your content as a code, I’m able to see the issue. It’s because of curly quotes, this is wrong class=“third-acc-item", this is the correct one class="third-acc-item". You must use proper quotes and not just the curly quotes.

Thanks!

1 Like

Hi @Rad,

Thank you for discovering the error – I kept comparing the code, but I wasn’t catching the curly quotes!

Thank you for the final resolution and thank you to everyone who so patiently helped me.

Glad it’s working now and you’re most welcome!

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.