CodePen

HTML

            
              <div class="services">
  
			<div class="services_graphic">
				<ul>
					<li id="primary" class="selected toggle-position-one">Primary Services</li> 
					<li class="two toggle-position-two" id="secondary">Extras</li>
				</ul>
			</div>
  
  
			<div class="services_text viewed" id="primary">
				<h2>Brand New Website</h2>
				<p>We work closely with you to develop ...</p>
        
        
        <div class="services_text" id="secondary">
				<h2>Hosting and Webmaster Services</h2>
          <p>In addition to design...</p>
			</div>

			</div>
		</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .shift_background {
	background-position:-458px;
}

.services_text {
	position: absolute;
	top:-9999px;
	left:-9999px;
}

.viewed {
	position:static;}

.services_graphic li {
  display:inline-block;
}



            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function(){


$(".services_graphic li").click(function(){
	var thisID = $(this).attr('id');
	//console.log(thisID);//test code
	
	//update the selected tab
	$('.selected').removeClass('selected');
	$(this).addClass('selected');

	//hide the currently displayed about content and replace with the newly selected content using corresponding id
	$('.services_text').removeClass('viewed');
	$('.services_text#'+thisID).addClass('viewed');

	//switch the tab background image position to reflect the selected content
	var $selected = $('.selected');
	
	if ($selected.hasClass("two")) {
		$('.services_graphic').addClass('shift_background');
		
		//switch tab wording positions if primary was previously selected
		if ($selected.hasClass('toggle-position-two')){
			$('li#primary').toggleClass('toggle-position-one');
			$('li#secondary').toggleClass('toggle-position-two');
		}

		
	}
	else {
		$('.services_graphic').removeClass('shift_background');
		
		//switch tab wording positions if extra was previously selected
		if ($selected.hasClass('toggle-position-one')){}
		else{
			$('li#primary').toggleClass('toggle-position-one');
			$('li#secondary').toggleClass('toggle-position-two');
		}
		
		
	};
	
	//switch the position of the <li>s with tab labels for phone display only
	
	
	
});




});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................