Issue showing a selected id

Question

I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.

The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.

Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?

//For tabs to stay active
	$('.marketing-service').click(function() {
		$('.marketing-service.active').removeClass('active');
		$(this).toggleClass('active');
		
		//To get the service display box to show
		var item_number = $(this).attr('id').replace('marketing-tab', '');
		/* $('html, body').animate({
		scrollTop: $("#service-display-box").offset().top
	  }, 1500);*/
		$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
	});

.marketing-section-wrap, .marketing-section-wrap-main {
	width: 100%;
	height: auto;
	padding: 80px 0;
	border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
	display: none;
}
#marketing-services {
	width: 95%;
	margin: 0 2.5%;
}
.marketing-service {
	display: inline-block;
	width: 22%;
	margin: 0 1%;
	height: 400px;
	background: #F0F0F0;
	position: relative;
	cursor: pointer;
}
.marketing-service:first-child {
	margin-left: 0;
}
.marketing-service:last-child {
	margin-right: 0;
}
.marketing-service:hover {
	background: rgba(0, 255, 170, .4);
	z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}
.marketing-service:after.active {
	border-width: 0px;
	margin-left: 0px;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #88b7d5;
	margin-top: -30px;
}
.marketing-service:before.active {
	border-color: #FFF;
	border-top-color: #88b7d5;
	border-width: 36px;
	margin-left: -36px;
	margin-top: 0;
}
.marketing-service-wrap {
	padding: 10%;
	width: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
  <div class="marketing-service" id="marketing-tab1">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">1</h2>

    </div>
  </div>
  <div class="marketing-service" id="marketing-tab2">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">2</h2>

    </div>
  </div>
  <div class="marketing-service" id="marketing-tab3">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">3</h2>

    </div>
  </div>
  <div class="marketing-service" id="marketing-tab4">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">4</h2>

    </div>
  </div>
</div>
<div id="marketing1">
  <div class="marketing-section-wrap">
    1
  </div>
</div>
<div id="marketing2">
  <div class="marketing-section-wrap">
    2
  </div>
</div>

Answer 1

Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;

first run this to hide all marketing-section-wrap

$('.marketing-section-wrap').hide();

then this will show only the one which corresponds to this click.

$('#marketing'+item_number).children().show();