Menu icon Foundation
Links not working inside Accordion

I'm using Foundation 5.5.2 and I'm having trouble with putting links inside the content div of the accordion. It runs into the next li of the accordion. Below is my html. And also attached is the custom css I have added in app.css.

Anyone know how I can fix it?

<!-- HTML -->
<ul class="accordion" data-accordion role="tablist">
                                  <li class="accordion-navigation">
                                    <a href="#panel1d" role="tab" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
                                    <div id="panel1d" class="content" role="tabpanel" aria-labelledby="panel1d-heading">
                                        Panel 1. Lorem ipsum dolor
                                        <a href="#">Link here</a>
                                    </div>
                                  </li>
                                  <li class="accordion-navigation">
                                    <a href="#panel2d"  role="tab" id="panel2d-heading" aria-controls="panel2d">Accordion 2</a>
                                    <div id="panel2d" class="content" role="tabpanel" aria-labelledby="panel2d-heading">
                                      Panel 2. Lorem ipsum dolor
                                    </div>
                                  </li>
                                  <li class="accordion-navigation">
                                    <a href="#panel3d" role="tab" id="panel3d-heading" aria-controls="panel3d">>Accordion 3</a>
                                    <div id="panel3d" class="content" role="tabpanel" aria-labelledby="panel3d-heading">
                                      Panel 3. Lorem ipsum dolor
                                    </div>
                                </ul>
            

         

/* CSS */
/* ACCORDION */
.accordion { counter-reset: section; margin-left: 0; margin-bottom: 10px; }
.accordion .accordion-navigation > a { 
    padding-left: 3.5em;
	background: #eeeae4;
	color: #082047;
	border: 1px solid #c5ac8d;
	margin-bottom: 2px;
}

.accordion .accordion-navigation > a:hover {
	background: #dfd4ca;
}

.accordion li a:before {
	counter-increment: section; 
  	content: counter(section);
	position: absolute;
	left: .75em;
	width: 40px;
	height: 40px;
	padding: 0 5px 0 0;
	margin-top: -.25em;
	color: #643f15;
	font-size: 1.5em;
	text-align: right;
}

.accordion-navigation a:after {
    border-color: #643f15 transparent transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 8px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 2em;
    width: 0;
	margin-top: -.95em;
}
            

         

accordion

I'm using Foundation 5.5.2 and I'm having trouble with putting links inside the content div of the accordion. It runs into the next li of the accordion. Below is my html. And also attached is the custom css I have added in app.css.

Anyone know how I can fix it?

<!-- HTML -->
<ul class="accordion" data-accordion role="tablist">
                                  <li class="accordion-navigation">
                                    <a href="#panel1d" role="tab" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
                                    <div id="panel1d" class="content" role="tabpanel" aria-labelledby="panel1d-heading">
                                        Panel 1. Lorem ipsum dolor
                                        <a href="#">Link here</a>
                                    </div>
                                  </li>
                                  <li class="accordion-navigation">
                                    <a href="#panel2d"  role="tab" id="panel2d-heading" aria-controls="panel2d">Accordion 2</a>
                                    <div id="panel2d" class="content" role="tabpanel" aria-labelledby="panel2d-heading">
                                      Panel 2. Lorem ipsum dolor
                                    </div>
                                  </li>
                                  <li class="accordion-navigation">
                                    <a href="#panel3d" role="tab" id="panel3d-heading" aria-controls="panel3d">>Accordion 3</a>
                                    <div id="panel3d" class="content" role="tabpanel" aria-labelledby="panel3d-heading">
                                      Panel 3. Lorem ipsum dolor
                                    </div>
                                </ul>
            

         

/* CSS */
/* ACCORDION */
.accordion { counter-reset: section; margin-left: 0; margin-bottom: 10px; }
.accordion .accordion-navigation > a { 
    padding-left: 3.5em;
	background: #eeeae4;
	color: #082047;
	border: 1px solid #c5ac8d;
	margin-bottom: 2px;
}

.accordion .accordion-navigation > a:hover {
	background: #dfd4ca;
}

.accordion li a:before {
	counter-increment: section; 
  	content: counter(section);
	position: absolute;
	left: .75em;
	width: 40px;
	height: 40px;
	padding: 0 5px 0 0;
	margin-top: -.25em;
	color: #643f15;
	font-size: 1.5em;
	text-align: right;
}

.accordion-navigation a:after {
    border-color: #643f15 transparent transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 8px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 2em;
    width: 0;
	margin-top: -.95em;
}
            

         

This post has been closed. No new replies can be added.

Rafi Benkual about 4 years ago

It has to do with the absolute positioning of .accordion li a:before. What is that being used for?

Carolyn Lee about 4 years ago

I was adding a number before the href so that each accordion li is numbered. But I'm open to suggestions. I was trying to position the number to center it vertically within the accordion li and also have an arrow :after.

Rafi Benkual about 4 years ago

That should be fine. I would then make the counter element display: block so it stacks. Positioning absolute will cause the overlap unless you manually move it (not good option if content will be added periodically)

Carolyn Lee about 4 years ago

Ok yes I took out the position absolute and put in the display: block but it was still messing with the href element inside the content div. I realized it was counting it. So when I take out the counter completely then the href inside that div works just fine. I was trying to figure out a way to do a counter though so each li has a number. How would I exclude the href element inside that div from also being counted?

Rafi Benkual about 4 years ago

Make your counter more specific. You are including all anchor tags inside an accordion li.

Perhaps give apply it on the li itself and position where you want.

Carolyn Lee about 4 years ago

Thank you! I did just that, put the counter on the li and also added a > between .accordion li:before and also on the :after one so it would only style the child element below it and not every li and a element within it.