CodePen Embed - Full width accordion slider

<div class="banner-container">
	<div class="banner banner-1 banner-selected">
		<label for="banner-1" class="banner-item"></label>
		<input type="radio" id="banner-1" name="banner" class="banner-trigger" checked="checked" />
		<div class="banner-wrap">
			<img class="banner__img" src="http://imageshack.com/a/img18/3363/n6wn.jpg" alt="Nuestro negocio es fabricar eficiencia" />
			<div class="banner__overlay banner__overlay--high-voltage"></div>
			<div class="banner__content">			
				<div class="media">
          <div class="media__img">
            <i class="fa fa-refresh fa-5x"></i>
          </div>
					<div class="media__body">
						<p class="banner-title">
							Our Business
							<span>
								is <strong>life itself.</strong>
							</span>
						</p>						
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="banner banner-2">
		<label for="banner-2" class="banner-item"></label>
		<input type="radio" id="banner-2" name="banner" class="banner-trigger" />
		<div class="banner-wrap">
			<img class="banner__img" src="http://imageshack.com/a/img18/3363/n6wn.jpg" alt="Nuestro negocio es fabricar eficiencia" />
			<div class="banner__overlay banner__overlay--low-voltage"></div>
			<div class="banner__content">			
				<div class="media">
          <div class="media__img">
            <i class="fa fa-power-off fa-5x"></i>
          </div>					
					<div class="media__body">
						<p class="banner-title">
							Our Business
							<span>
								is <strong>life itself.</strong>
							</span>
						</p>						
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="banner banner-3">
		<label for="banner-3" class="banner-item"></label>
		<input type="radio" id="banner-3" name="banner" class="banner-trigger" />
		<div class="banner-wrap">
			<img class="banner__img" src="http://imageshack.com/a/img18/3363/n6wn.jpg" alt="Nuestro negocio es fabricar eficiencia" />
			<div class="banner__overlay banner__overlay--iluminations"></div>
			<div class="banner__content">			
				<div class="media">				
					<div class="media__img">
					  <i class="fa fa-music fa-5x"></i>
					</div>
					<div class="media__body">
						<p class="banner-title">
							Our Business
							<span>
								is <strong>life itself.</strong>
							</span>
						</p>						
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="banner banner-4">
		<label for="banner-4" class="banner-item"></label>
		<input type="radio" id="banner-4" name="banner" class="banner-trigger" />
		<div class="banner-wrap">
			<img class="banner__img" src="http://imageshack.com/a/img18/3363/n6wn.jpg" alt="Nuestro negocio es fabricar eficiencia" />
			<div class="banner__overlay banner__overlay--renewable"></div>
			<div class="banner__content">			
				<div class="media">				
					<div class="media__img">
					  <i class="fa fa-star fa-5x"></i>
					</div>
					<div class="media__body">
						<p class="banner-title">
							Our Business
							<span>
								is <strong>life itself.</strong>
							</span>
						</p>						
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

/**
 * Vars
 */
$base-font-size:    14px;
$base-line-height:  23px;
$base-spacing-unit: $base-line-height;

/**
 * Fonts
 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600);


/**
 * Mixins (inuit.css)
 */
@mixin vendor($property, $value...){
    -webkit-#{$property}:$value;
       -moz-#{$property}:$value;
        -ms-#{$property}:$value;
         -o-#{$property}:$value;
            #{$property}:$value;
}

@mixin font-size($font-size, $line-height:true){
    font-size:$font-size;
    font-size:($font-size / $base-font-size)*1rem;
    @if $line-height == true{
        line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    }
}

body{
  font-family: 'Open Sans', sans-serif;
}

%container{
	width: 980px;
	margin: 0 auto;
}

.cf{
    &:after{
        content:"";
        display:table;
        clear:both;
    }
}

/**
 * Media Object
 */
.media{
    display:block;
    @extend .cf;
}
    .media__img{
        float:left;
        margin-right:$base-spacing-unit;
    }
    /**
     * Reversed image location (right instead of left).
     */
    .media__img--rev{
        float:right;
        margin-left:$base-spacing-unit;
    }

        .media__img img,
        .media__img--rev img{
            display:block;
        }

    .media__body{
        overflow:hidden;
    }
        .media__body,
        .media__body > :last-child{
            margin-bottom:0;
        }



/**
 * Accordion-Banner
 */
.banner-container{
	overflow: hidden;
	position: relative;	
}
.banner{
	position: absolute;
	top: 0;
	width: 110px;
	height: 450px;
	z-index: 10;
	@include vendor(transition, all .3s ease);
}
	/*Elements*/
	.banner__img{
		max-width: none;
	}
	.banner__img, .banner__overlay{
		position: absolute;
		height: 100%;
		top: 0; left: 0; bottom: 0; right: 0;
	}
	.banner__content{
		padding-top: 140px;
		position: relative;
		@extend %container;
	}
		/*Elements' Modifiers*/
		.banner__img--static{
			display: block;
		}
		.banner__overlay--high-voltage{
			background: darken(rgba(240,81,81,0.65), 20%);
		}
		.banner__overlay--low-voltage{
			background: darken(rgba(33,124,193,0.80), 23%);
		}
		.banner__overlay--iluminations{
			background: rgba(238,183,6,0.6);
		}
		.banner__overlay--renewable{
			background: darken(rgba(0,172,139,0.7), 10%);
		}

.banner-item{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
	cursor: pointer;
	&:hover + .banner-trigger:not(:checked) + .banner-wrap{
		width: 110px;
		@include vendor(transition, width .3s ease);
	}
}
.banner-trigger{
	display: none;
	&:checked ~ .banner-wrap{
		width: 100%;
		@include vendor(transition, width .1s ease);
	}	
}
.banner-wrap{
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100px;
	overflow: hidden;
	border-left: 2px solid #FFF;
	border-right: 2px solid #FFF;
	@include vendor(transition, width .3s ease);
}
.banner-selected{
	position: relative;	
	width: 100%;
	left: 0 !important;
	right: 0 !important;
	z-index: 5 !important;
	.banner-wrap{
		width: 100%;
		border: none;
	}
	&.banner-2 .banner__content{ padding-left: 100px; }
	&.banner-3 .banner__content{ padding-left: 250px; }
	&.banner-4 .banner__content{ padding-left: 430px; }
}

.banner-1{ left: 15%; z-index: 10; }
.banner-2{ left: 21%; z-index: 9; }
.banner-3{ left: 27%; z-index: 8; }
.banner-4{ left: 72%; z-index: 7; }

.banner-1.banner-selected + .banner-2{ left: 60%; }
.banner-2.banner-selected + .banner-3, .banner-1.banner-selected + .banner-2 + .banner-3{ left: 66%; }

.banner-title{    
    text-transform: uppercase;
    color: #FFF;
    margin: 0;
    @include font-size(40px);
    span{
        display: block;
    }    
}

.fa-5x{
  font-size: 95px;
  color: #FFF;
}

View Compiled

$(function(){
		var banner = $('.banner-selected').children('.banner-item').attr('for');

		$('.banner-item').click(function(){
			var trigger = $(this).attr('for');
			var parent  = $(this).parent();

			$('.banner').removeClass('banner-selected');
			parent.addClass('banner-selected');			
		});
	})

This Pen is owned by Eze Rangel on CodePen.

See more by @EzeRangel on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js