Expanding Div CSS - html

Question

I'm redesigning the fixtures section of our football teams page at the moment and would like to add functionality for clicking on the fixutre (most likely the date) and it then 'expands' and shows details of the fixture.
The details to be shown include kickoff time, sponsors and scorers etc....
I will be modifying the previous code for the actual expanding but for the life of me I can't work out why the Div to display this is being confinded to the width of the first div within the li tag.
The div is after the closing of the li so I though that would have stopped that happening. Hopefully makes sense, code below:
<ul>
<li>
<div class="cell"><span><a>July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>Friendly</span></div>
</li>
<div class = "fixture-info">
<div class = "kickoff">Kickoff: <span>1930</span></div>
<div class = "match-sponsor">....</div>
.........
</div>
<!--Next Fixture-->
<li>....</li>
What I would like it to look like would be:
(No expanded)
July 7th Nairn County 1 Inverness 3 Friendly
July 14th Nairn County 1 Nairn St Ninian 2
(Expanded)
July 7th Nairn County 1 Inverness 3 Friendly
Kickoff: 1930
Match Sponsor: ......
....
July 14th Nairn County 1 Nairn St Ninan 2
July 15th ...............................
.......
How it currently looks.
July 7th Nairn ..........
Kickoff:1
930
Match Spo
nsor(s): M
adeup spon
sor
I would like the fixture info div to be the same width as the li not the first within.
Any help appreciated.
UPDATE
Have moved the div within the li tag. I am getting very different results from the suggested answers. I think this is because the previous div's are being display as table-cell to keep everything the same, inline-block knocks this out.
I've uploaded images of what is happening.
1st is inline-block styling.
2nd is the details moved inside the li tag.
3rd is how I would like it to be and how it is normally. I would like the
fixture info to the same with as the who fixture (date, fixture and type).

Answer 1

Simple solution:
use display: inline-block; to force those divs in the same line. Since div by default have display: block which will take the whole line.
.cell {
display: inline-block;
}
use toggleClass from jQuery:
$(document).ready(function() {
// Slide
$('ul > li').click(function() {
$(this).next('.fixture-info').toggleClass('collapsed').slideToggle('fast');
});
});
And hide all sub section first using css:
.fixture-info {
background-color: lightgray;
display: none;
}
$(document).ready(function() {
// Slide
$('ul > li').click(function() {
$(this).next('.fixture-info').toggleClass('collapsed').slideToggle('fast');
});
});
.fixture-info {
background-color: lightgray;
display: none;
}
.cell {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="cell"><span><a>July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>Friendly</span></div>
</li>
<div class="fixture-info">
<div class="kickoff">Kickoff: <span>1930</span></div>
<div class="match-sponsor">....</div>
111.........
</div>
<!--Next Fixture-->
<li>
<div class="cell"><span><a> 2222 July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>222 Friendly</span></div>
</li>
<div class="fixture-info">
<div class="kickoff">222 Kickoff: <span>1930</span></div>
<div class="match-sponsor">....</div>
2222.........
</div>
</ul>

Answer 2

Move the
<div class = "fixture-info">
<div class = "kickoff">Kickoff: <span>1930</span></div>
<div class = "match-sponsor">....</div>
.........
</div>
inside the li
then use something like
var li = document.getElementsByTagName('li');
li.addEventListener('click', expandFunction);
function expandFunction() {
this.classList.add('expanded');
}
//SCSS
li {
height: auto;
.fixture-info {
height: 0;
transition: all 0.25s ease-out;
}
&.expanded {
.fixture-info {
height: 80px; //height value of expanded box
}
}
}

Answer 3

Here's a pure html+css solution if you're not too familiar with javascript. The only downside to using the show/hide checkbox maneuver is having to label each one of your label/inputs so they don't have to toggle one another ( see html, toggle1, toggle2, etc).
Outside of this I'd recommend the the 'toggleClass' jQuery solution from the other answer.
ul {
list-style: none;
margin: 0 0 20px;
}
ul li {
color: #2B91AF;
margin: 0 0 10px;
}
ul li span a,
ul li span[class*='-score'] {
color: red;
}
ul li .cell {
display: inline-block;
}
input[type=checkbox],
ul li .fixture-info {
display: none;
}
input[type=checkbox]:checked+.fixture-info {
display: block;
}
<ul>
<li>
<label for="toggle1">
<div class="cell"><span><a>July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>Friendly</span></div>
</label>
<input id="toggle1" type="checkbox">
<div class="fixture-info">
<div class="kickoff">Kickoff: <span>1930</span></div>
<div class="match-sponsor">Match Sponsor: ....</div>
</div>
<li>
<li>
<label for="toggle2">
<div class="cell"><span><a>July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>Friendly</span></div>
</label>
<input id="toggle2" type="checkbox">
<div class="fixture-info">
<div class="kickoff">Kickoff: <span>1930</span></div>
<div class="match-sponsor">Match Sponsor: ....</div>
</div>
<li>
</ul>

Answer 4

Don't put any elements between the "li" tags
Here is a possible way of organizing the HTML
<ul>
<li>
<div class="cell"><span><a>July 7th</a></span>
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
<span>Friendly</span>
</div>
<ul>
<li>
<div class = "fixture-info">
<div class = "kickoff">Kickoff: <span>1930</span></div>
<div class = "match-sponsor">....</div>
.........
</div>
</li>
</ul>
</li>
<!--Next Fixture-->
<li>....</li>
<ul>