JQuery Accordion面板大小

Question

I've received quite a bit of assistance with my Accordion here on SO. As a result, I think that some code has been changed around a bit by different members. My big problem right now is the difference in panel sizing between Panel's 1 & 2 and that of Panel's 3 & 4. I'm new to CSS and JQuery so don't quite yet have the knowledge to figure out exactly what is wrong. With Panel's 1 & 2, the panel's do not span the width of the headers. I'm getting the width with Panel's 3 & 4 but, not the height. I'm looking for the same consistency in all 4 panels and I'm just not positive what needs to be changed to accomplish this. Thanks for your time and any assistance you may be able to provide.

This is the working example: http://www.realtimehockey.net/scoresschedules/4579961481

FIDDLE: http://jsfiddle.net/Del087/3ewjtubd/

CSS

#accordion {
width:100%;
margin:10px auto;
border:1px solid black;
-webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
}
#accordion h2 {
clear: both;
cursor:pointer;
margin:0px 0px;
padding:7px 15px;
border:1px solid white;
background-color:#080808;
font:bold 22px Petua One;
color:#ffffff;
text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
#accordion .content1 {
background-color:#ffffff;
padding:10px 15px;
color:black;
height:230px;
width:25%;
float:left;
}
#accordion h2.active {
background-color:#ff6600;
}
.content-wrapper {
display: inline-block;
}
.content-wrapper a {
display: block;
}

HTML

<div id="accordion">
 <h2><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHNeoLogo10_zps4b3f5604.png" width="25" height="25" border="0" alt=" photo RTHNeoLogo10_zps4b3f5604.png"/></a>   League Scores</h2>

<div class="content">
    <div class="content1"><a href="http://www.pahockey.com">Pittsburgh Amateur<br> Hockey League</a><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt=" photo PAHL210210_zps694744b9.png"/></a>

        <br><a href="http://www.pahockey.com">Squirt</a>

        <br><a href="">Pee Wee</a>
        <br><a href="">Bantam</a>

    </div>
    <div class="content1"><a href="http://www.pahockey.com">High Performance<br> Hockey League</a>

        <br><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/HPHL_zps31e66fcd.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/HPHL_zps31e66fcd.png" width="90" height="90" border="0" alt=" photo HPHL_zps31e66fcd.png"/></a>
        <br><a href="http://www.pahockey.com">Squirt</a>

        <br><a href="">Pee Wee</a>
        <br><a href="">Bantam</a>

    </div>
</div>
 <h2><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHNeoLogo10_zps4b3f5604.png" width="25" height="25" border="0" alt=" photo RTHNeoLogo10_zps4b3f5604.png"/></a>   League Standings</h2>

<div class="content">
    <div class="content1">Pittsburgh Amateur Hockey League <a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt="Pittsburgh Amateur Hockey League - Pittsburgh, PA" title="Pittsburgh Amateur Hockey League - Pittsburgh, PA"/></a>

        <br><a href="http://www.pahockey.com">Squirt</a>
        <br>Pee Wee</div>
</div>
 <h2><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHNeoLogo10_zps4b3f5604.png" width="25" height="25" border="0" alt=" photo RTHNeoLogo10_zps4b3f5604.png"/></a>   Tournament Scores</h2>

<div class="content">

    <div class="content-wrapper"><a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100"  border="0"  alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a>

    <br><a href="http://www.pahockey.com">Minnesota Gone Wild"</a>

    </div>
    <div class="content-wrapper"><a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a href="http://www.pahockey.com">Blizzard Challenge<br>Presidents Day Tournament</a>

    </div>
    <div class="content-wrapper"><a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a href="http://www.pahockey.com">Blizzard Challenge<br>Presidents Day Tournament</a>

    </div>
    <div class="content-wrapper"><a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a href="http://www.pahockey.com">Blizzard Challenge<br>Presidents Day Tournament</a>

    </div>

</div>
 <h2><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHNeoLogo10_zps4b3f5604.png" width="25" height="25" border="0" alt=" photo RTHNeoLogo10_zps4b3f5604.png"/></a>   Tournament Standings</h2>

<div class="content">
    <div class="content-wrapper"><a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100" border="0" alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><a href="http://www.pahockey.com">Minnesota Gone Wild<br>Texas Longhorn Shootout</a>

    </div>
    <div class="content-wrapper"><a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a href="http://www.pahockey.com">Blizzard Challenge<br>Presidents Day Tournament</a>

    </div>
    <div class="content-wrapper"><a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a href="http://www.pahockey.com">Blizzard Challenge<br>Presidents Day Tournament</a>

    </div>
</div>

JS

$(function () {
$('#accordion .content').hide();
//$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function () {
    if ($(this).next().is(':hidden')) {
        $('#accordion h2').removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
    }
});

});

Answer 1

Regarding the height, currently it's as follows:

1. The content of panel 1 is wrapped in a div with the class .content1 , the height of this class is set to 230px with a padding of 10px to top and bottom
2. The content of panel 2 is wrapped in a div with the id #content1 , and the height for this id is also set to 230px, and the padding to top and bottom also set to 10px
3. Each content of panel 3 and 4 is wrapped in a class .content-wrapper without any fixed height or padding set, so the content just fits in the panel.

If you eg would prefer to set all panels to the same height of 230px with the same padding, I've just adjusted this in the latest Fiddle