css - Nested HTML Lists -


i'm looking put content under accordions built using "ul" each accordion item it's own "li".

my issue want content in 1 of accordion items include it's own "ul".

what proper way approach this?

codepen link: http://codepen.io/steve-jones/pen/pbvokj

<ul class="accordion">     <li>         <a>faq: vegetarian-friendly diet</a>         <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro             minus sapiente voluptatibus eos @ perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. aliquid, iure.</p>     </li>     <li>         <a>faq: snacking @ work</a>         <p>what convenient things can snack on while @ work?</p>         <p>most major grocery chains , specialty grocers sell pre-cut veggies. these typically include variety of peppers, cucumbers, broccoli florets, cauliflower, microwaved heart of office nemesis. wait, lawyers have strike last             one. of these same stores carry pre-packaged cherry tomatoes. of veggies convenient snack on throughout day. , feel free add low-fat or fat/sugar free flavor enhancer of choice , have @ it. downside             pre-cut veggie option pre-cut/packaged veggies more expensive buying veggies whole , cutting them yourself.</p>         <p>here few other, convenient, non-veggie ideas:</p>         <ul>             <li>powdered peanut butter, pb2, adds ton of flavor celery again easy snack on</li>             <li>tuna straight out of pouch easy. can mix non-fat greek yogurt, mustard, or avocado</li>             <li>if have boat, , 10 hours in workday, go fishing real thing</li>             <li>individually packaged plain (0% fat) greek yogurt easy keep @ desk</li>             <li>almonds, walnuts, , pistachios (come season) easy store in desk; can used projectiles in case office food fight breaks out</li>             <li>protein shake; or if have access blender , ice, can make manup-approved smoothie (feel free add in oats carb serving)</li>         </ul>     </li>     <li>         <a>faq: food burnout</a>         <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro             minus sapiente voluptatibus eos @ perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. aliquid, iure.</p>     </li> </ul> <!-- / accordion -->

css

.accordion {     max-width: 560px;     margin: 0 auto 100px;     border-top: 1px solid #d9e5e8; }  .accordion li {     border-bottom: 1px solid #d9e5e8;     position: relative; }  .accordion li p {     display: none;     padding: 10px 25px 30px;     color: #6b97a4; }  .accordion {     width: 100%;     display: block;     cursor: pointer;     font-weight: 600;     line-height: 3;     font-size: 14px;     font-size: 0.875rem;     text-indent: 15px;     user-select: none; }  .accordion a:after {     width: 8px;     height: 8px;     border-right: 1px solid #4a6e78;     border-bottom: 1px solid #4a6e78;     position: absolute;     right: 10px;     content: " ";     top: 17px;     transform: rotate(-45deg);     -webkit-transition: 0.2s ease-in-out;     -moz-transition: 0.2s ease-in-out;     transition: 0.2s ease-in-out; }  .accordion p {     font-size: 13px;     font-size: 0.8125rem;     line-height: 2;     padding: 10px; }  a.active:after {     transform: rotate(45deg);     -webkit-transition: 0.2s ease-in-out;     -moz-transition: 0.2s ease-in-out;     transition: 0.2s ease-in-out; }

assuming mean how manage styling inner , outer lists, common way handle styles this:

.accordion {  /* styling */ }  .accordion > li {  /* targets children of accordion */ }  .accordion > li ul {  /* targets inner list(s) */ }  .accordion > li ul > li {  /* targets inner list(s) children lis */ }

Comments

Post a Comment

Popular posts from this blog

jOOQ update returning clause with Oracle -

according http://www.jooq.org/doc/3.8/manual/sql-building/sql-statements/update-statement/ jooq doesn't support returning clause in update statements databases except firebird , postgres. does know, still correct oracle jooq? according oracle's documentation, oracle db supports returning clase delete, insert, or update statements. incorrect manual you're right - manual wrong , should fixed: https://github.com/jooq/jooq/issues/5470 single row update returning jooq 3.8 added support single row update .. returning statements. internally, uses callablestatement , pl/sql block of form: begin update "my_table" set "my_table"."column" = 'xyz' "my_table"."id" = 1 returning "my_table"."id", "my_table"."column" ?, ?; ? := sql%rowcount; end; the relevant issue is: https://github.com/jooq/jooq/issues/5190 multi row update returning a...
Read more

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

i have entity inherits other. on other hand, i'm using lombok project reduce boilerplate code, put @data annotation. annotation @data inheritance produces next warning: generating equals/hashcode implementation without call superclass, though class not extend java.lang.object. if intentional, add '@equalsandhashcode(callsuper=false)' type. is advisable add annotation @equalsandhashcode (callsuper = true) or @equalsandhashcode (callsuper = false) ? if not added, 1 callsuper=false or callsuper=true ? the default value false . 1 if don't specify , ignore warning. yes, recommended add @equalsandhashcode annotation on @data annotated classes extend else object. cannot tell if need true or false , depends on class hierarchy, , need examined on case-by-case basis. however, project or package, can configure in lombok.config call super methods if not direct subclass of object. lombok.equalsandhashcode.callsuper = call for configuration system ...
Read more

java - BasicPathUsageException: Cannot join to attribute of basic type -

i using java 8 jpa (hibernate 5.2.1). have clause works perfectly, until introduce clause make use foreign key table values too. i getting following error: basicpathusageexception: cannot join attribute of basic type i think problem related fact have join table, , not sure how create join using join table. employee - employee_category - category model (employee.java): @manytomany(cascade = cascadetype.all, fetch=fetchtype.eager) @jointable ( name="employee_category", joincolumns={ @joincolumn(name="emp_id", referencedcolumnname="id") }, inversejoincolumns={ @joincolumn(name="cat_id", referencedcolumnname="id") } ) private set<category> categories; model (category.java): @id private string id; jpa when introduce following code, fails error above (i think problem new piece of code): join<t, category> category = from.join("id"); predicates.add(criteriabuilder.like(category....
Read more