ListToggle

Using a ul and a element to toggle a list using jQuery

HTML

<div id="content" role="main" class="ui-content" runat="server">
  <div class="GameContainer">
    <div class="aTeamBox">
      <div class="aRecBox">1-9</div>
      <div class="aTeamAbbrBox">CAR</div>
      <div class="aTeamNameBox">PANTHERS</div>
    </div>
    <div class="aTeamScoreBox">14</div>
    <div class="gmStatusBox">FINAL</div>
    <div class="hTeamScoreBox">24</div>
    <div class="hTeamBox">
       <div class="hRecBox">6-1</div>
       <div class="hTeamAbbrBox">PHI</div>
       <div class="hTeamNameBox">EAGLES</div>
    </div>
  </div>
               
</div><!-- /content -->

<div id="results">

</div>

CSS

[data-role="header"] {
            background-color: rgb(6,90,163) !important;
            color: white !important;
            height:36px !important;
            padding-top:18px;
            font-size:12pt !important;
            font-weight:500 !important;
            text-align:center;
        }

        [data-role="header2"] {
            height:25px;
            background-color:white;
            color:black;
            padding-top:10px;
            -webkit-box-shadow: 0 3px 5px #888888;
            -moz-box-shadow: 0 3px 5px #888888;
            box-shadow: 0 3px 5px #888888;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            margin-top:2px;
 
        }

            [data-role="header2"] #AwayHdr {
                color:gray;
                font-size:8pt;
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                -webkit-flex-basis: 33%;
                text-align:left;
                padding-left:30px;
            }

            [data-role="header2"] #GamesHdr {
                font-size:10pt;
                -webkit-box-flex: 2;
                -moz-box-flex: 2;
                -webkit-flex: 2;
                -ms-flex: 2;
                flex: 2;
                -webkit-flex-basis: 33%;
                text-align:center;
                font-weight:600;
            }

            [data-role="header2"] #HomeHdr {
                color:gray;
                font-size:8pt;
                -webkit-box-flex: 3;
                -moz-box-flex: 3;
                -webkit-flex: 3;
                -ms-flex: 3;
                flex: 3;
                -webkit-flex-basis: 33%;
                text-align:right;
                padding-right:30px;
            }

        [data-role="footer"] {
            background-color:...

JavaScript

$(document).on('click', ".outer-list", function() {
        $('#results').html($(this).parents().siblings().children().attr('class'));
    		//$(this).siblings('.inner-list').toggle();
        alert('test');
		});