Menu icon Foundation
XY grid Semantically collapse

Hello, i want collapse block with xy grid (Semantically) but i don't find solution to collapse block. Someone know solution ?

<div class="container_intro_activite">
	<div class="intro_activite">
		<div class="test cell">
			<h1>test</h1>
			<p>
				test
			</p>

		</div>
		<div class="federation_ffs cell">
				<img class="bg_header" src="<?php echo get_bloginfo( 'template_directory' ); ?>/assets/images/picto-ffs.png" alt="">
				<h2>test</h2>
				<p>test</p>
		</div>
	</div>
</div>

 

.container_intro_activite{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .intro_activite{
    @include xy-grid;
    padding: 20px;
    background-color: $color_3;
    margin: 0;

    .content{
      @include xy-cell(6);
      h2{
        font-family: $font_1;
        font-size: 22px;
        line-height: 26px;
        text-align: center;
        color: white;
      }
      p{
        text-align: center;
      }
    }

    .federation_ffs{
      @include xy-cell(6);
      padding: 20px;
      img{
        display: block;
        width: 108px;
        height: 80px;
        margin-bottom: 10px;
      }
      h2{
        font-family: $font_1;
        font-size: 22px;
        line-height: 26px;
        text-align: center;
        color: white;
      }
      p{
        text-align: center;
      }
    }
  }

 

Thanks a lot for your help

 

collapse

Hello, i want collapse block with xy grid (Semantically) but i don't find solution to collapse block. Someone know solution ?

<div class="container_intro_activite">
	<div class="intro_activite">
		<div class="test cell">
			<h1>test</h1>
			<p>
				test
			</p>

		</div>
		<div class="federation_ffs cell">
				<img class="bg_header" src="<?php echo get_bloginfo( 'template_directory' ); ?>/assets/images/picto-ffs.png" alt="">
				<h2>test</h2>
				<p>test</p>
		</div>
	</div>
</div>

 

.container_intro_activite{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .intro_activite{
    @include xy-grid;
    padding: 20px;
    background-color: $color_3;
    margin: 0;

    .content{
      @include xy-cell(6);
      h2{
        font-family: $font_1;
        font-size: 22px;
        line-height: 26px;
        text-align: center;
        color: white;
      }
      p{
        text-align: center;
      }
    }

    .federation_ffs{
      @include xy-cell(6);
      padding: 20px;
      img{
        display: block;
        width: 108px;
        height: 80px;
        margin-bottom: 10px;
      }
      h2{
        font-family: $font_1;
        font-size: 22px;
        line-height: 26px;
        text-align: center;
        color: white;
      }
      p{
        text-align: center;
      }
    }
  }

 

Thanks a lot for your help