I have an accordion built for my customer lists and I am desiring to have another accordion built but in a different style to allow for my FAQ to be neatly organized. My issue is I do not know how to write code for more than one class so I can have two different accordions but not have them use the same styling.
Here is the style of the accordion I am trying to use as my FAQ.
CSS styles or applies aesthetics to the page. While there are css animation styles it's best when starting out to not consider these.
Javascript is the equivilant of a programming language such as Java, Python, C++, etc. but is the only programming language that works natively with the browser.
JQuery is a library created from javascript that is mostly for DOM manipulation. It's purpose is to be easier to use than javascript, but it is still javascript.
If your dropdown is not working it is most likely because of javascript. Either you do not have a script installed for the FAQ drop down to work or, if you do, your html elements are not properly structured, Id'd, or classed. You should first find the script then try to understand how it works. Most scripts you find on the internet come with documentation explaining how to set up your html.
I see one issue. Your classes aren't applied correctly here:
<div class=".wrapper-1.accordion">
it should be
<div class="wrapper-1 accordion">
no periods and spaces between class names. see if that helps.
Also it looks like you are nesting css. You have all of your css insde the wrapper-1 css. are you using sass or scss? I don't think you can use nesting in regular css.
I took out those periods in HTML and my fiddle isnt doing what I want. The content is there, it doesn't contain to the pillbox accordion traditional style before I added the wrapper.
Nesting? I don't know if I use sass or scss. I'm writing the code in basic JSFiddle and the basic Hubspot program.
If I can't nest it (which I'm guessing is when you wrap the div with the .wrapper-1.accordion{ } which is what I tried to do with the CSS) do you have to write .wrapper-1._____ for every section of the accordion?
Copy and paste this into your css and see that your styles apply. You can't nest css unless you use a preprocessor like sass or scss that process your short coded css into real css.
Thanks so much for your help, this project fell on the back burner.
I've given up on styling multiple accordions right now, I would rather just get this FAQ page to work. The code works great, the style is perfect. The only issue is that when I click on the button for the accordion, the content box does not drop down. Most outside forums discuss J Query in java script but I am only writing and hosting with hubspot and I'm unsure where that code would be.
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
border-radius: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #29cdcb;
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
display: none;
border-radius: 15px;
}
CSS styles or applies aesthetics to the page. While there are css animation styles it's best when starting out to not consider these.
Javascript is the equivilant of a programming language such as Java, Python, C++, etc. but is the only programming language that works natively with the browser.
JQuery is a library created from javascript that is mostly for DOM manipulation. It's purpose is to be easier to use than javascript, but it is still javascript.
If your dropdown is not working it is most likely because of javascript. Either you do not have a script installed for the FAQ drop down to work or, if you do, your html elements are not properly structured, Id'd, or classed. You should first find the script then try to understand how it works. Most scripts you find on the internet come with documentation explaining how to set up your html.
