Accordion


Why TP Metals?

We have the experience, manpower and equipment to remove almost any type of vehicle ranging from cars to farm equipment. You can trust TP Metals to remove your scrap and pay you top dollar.

How does it work?

If you have a vehicle or farm equipment you would like hauled away for cash, you could reach us by phone, email, text, or request a quote through our website where we will get back to you.

What kind of scrap vehicles do you purchase?

At TP Metals we buy all makes and models of vehicles including cars, SUVs, vans, trucks and even farm equipment! It doesn’t matter what condition they’re in or whether they’re running or not.

What happens to vehicles after they are crushed?

After vehicles are crushed, they are sent to a recycling center. At the center, the cars are shredded and broken into smaller pieces. These smaller pieces are then separated by metal, and these metals are reused in other forms.

PHP
<?php
	$faqs = array(
		array('name'=>'Why TP Metals?','value'=>'<p>We have the experience, manpower and equipment to remove almost any type of vehicle ranging from cars to farm equipment. You can trust TP Metals to remove your scrap and pay you top dollar.</p>'),
		array('name'=>'How does it work?','value'=>'<p>If you have a vehicle or farm equipment you would like hauled away for cash, you could reach us by phone, email, text, or request a quote through our website where we will get back to you.</p>'),
		array('name'=>'What kind of scrap vehicles do you purchase?','value'=>'<p>At TP Metals we buy all makes and models of vehicles including cars, SUVs, vans, trucks and even farm equipment! It doesn’t matter what condition they’re in or whether they’re running or not.</p>'),
		array('name'=>'What happens to vehicles after they are crushed?','value'=>'<p>After vehicles are crushed, they are sent to a recycling center. At the center, the cars are shredded and broken into smaller pieces. These smaller pieces are then separated by metal, and these metals are reused in other forms.</p>')
	);
?>
		
<section class="faqs">
	<div class="wrapper">
		<div class="faqs_wrap">
			<?php foreach ($faqs as $k=>$item) :?>
			<div class="faqs_item || <?= $k == 0 ? 'active' : ''?>">
				<div class="faqs_question"><?= $item['name'] ?></div>
				<div class="faqs_content || content" <?= $k == 0 ? 'style="display: block;"' : '' ?>><?= $item['value'] ?></div>
			</div>
			<?php endforeach;?>
		</div>
	</div>
</section>
		
<?php $faq_count = count($faqs);?>

<script type="application/ld+json">
	{
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
            <?php foreach ($faqs as $k=>$item) :?>
            {
            "@type": "Question",
            "name": "<?= htmlspecialchars($item['name'], ENT_QUOTES) ?>",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "<?= htmlspecialchars(strip_tags($item['value']), ENT_QUOTES)?>"
                }
            } <?=(($k + 1) < $faq_count ? ',' : '')?>
			<?php endforeach;?>
        ]
    }
</script>
CSS
.faqs .faqs_item{position:relative;border-bottom:.1rem solid #09a5be}
.faqs .faqs_item:first-child{border-top:.1rem solid #09a5be}
.faqs .faqs_item.active .faqs_question{border-bottom:.1rem solid #09a5be}
.faqs .faqs_item.active .faqs_question::before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.faqs .faqs_question{position:relative;padding:1.4rem 0 1rem 3.5rem;font-size: 2.4rem;font-weight: 400;line-height: 1.2;cursor:pointer;-webkit-transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#000}
.faqs .faqs_question::before{content:'';position:absolute;top:1.7rem;left:0;display:block;width:2.2rem;height:2.2rem;-webkit-background-size:100% 100%;-moz-background-size:100%;-o-background-size:100%;background-size:100%;background-position:center;background-image:url(/img/directions.png);background-repeat:no-repeat;-webkit-transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
.faqs .faqs_content{display:none;padding:1.5rem 0 1.5rem 3.5rem;}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.faqs .faqs_question:hover{color:#09a5be}
}

@media only screen and (max-width: 992px) {
	.faqs .faqs_question {font-size: 2rem;padding: 1.4rem 0 1rem 2.6rem;}
	.faqs .faqs_question::before {top: 1.6rem;width: 1.8rem;height: 1.8rem;}
	.faqs .faqs_content{padding:1.5rem 0 1.5rem 2.6rem}
}

@media only screen and (max-width: 767px) {
	.faqs .faqs_question {font-size: 1.8rem;padding: 1.4rem 0 1rem 2.3rem;}
	.faqs .faqs_question::before {width: 1.6rem;height: 1.6rem;}
	.faqs .faqs_content {padding: 1.5rem 0 1.5rem 2.3rem;}
	.faqs .faqs_content,.faqs .faqs_content p,.faqs .faqs_content ul li,.faqs .faqs_content ol li,.faqs .faqs_content blockquote{font-size:1.4rem}
}
SCSS
/* Vars */
$main:     #09a5be;
$cb:       #000000;

.faqs {
	.faqs_item {
		position: relative;
		border-bottom: 0.1rem solid $main;
		
		&:first-child {
			border-top: 0.1rem solid $main;
		}
		
		&.active {
			.faqs_question {
				border-bottom: 0.1rem solid $main;
				
				&::before {
					transform: rotate(90deg);
				}
			}
		}
	}
	
	.faqs_question {
		position: relative;
		padding: 1.4rem 0 1rem 3.5rem;
		font-size: 2.4rem;
		font-weight: 400;
		line-height: 1.2;
		cursor: pointer;
		transition: all 0.3s;
		user-select: none;
		color: $cb;
		
		&::before {
			content: '';
			position: absolute;
			top: 1.7rem;
			left: 0;
			display: block;
			width: 2.2rem;
			height: 2.2rem;
			background-size: 100%;
			background-position: center;
			background-image: url("/img/directions.png");
			background-repeat: no-repeat;
			transition: all 0.3s;
		}
	}
	
	.faqs_content {
		display: none;
		padding: 1.5rem 0 1.5rem 3.5rem;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.faqs .faqs_question:hover {color: $main;}
}

@media only screen and (max-width: 992px) {
	.faqs .faqs_question {font-size: 2rem;padding: 1.4rem 0 1rem 2.6rem;}
	.faqs .faqs_question::before {top: 1.6rem;width: 1.8rem;height: 1.8rem;}
	.faqs .faqs_content {padding: 1.5rem 0 1.5rem 2.6rem;}
}

@media only screen and (max-width: 767px) {
	.faqs .faqs_question {font-size: 1.8rem;padding: 1.4rem 0 1rem 2.3rem;}
	.faqs .faqs_question::before {width: 1.6rem;height: 1.6rem;}
	.faqs .faqs_content {padding: 1.5rem 0 1.5rem 2.3rem;}
	.faqs .faqs_content, .faqs .faqs_content p, .faqs .faqs_content ul li, .faqs .faqs_content ol li, .faqs .faqs_content blockquote {font-size: 1.4rem;}
}
JavaScript
$('.faqs_question').on('click', function () {
	var parent = $(this).closest('.faqs_item'),
		dropDown = parent.find('.faqs_content');
	
	if (parent.hasClass('active') === false) {
		parent.addClass('active');
		if ($(window).height() <= 920) {
			setTimeout(function () {
				$('html, body').animate({scrollTop: parent.offset().top - 58}, 400);
			}, 400);
		}
	} else {
		parent.removeClass('active');
	}
	
	$('.faqs_item').not(parent).removeClass('active');
	$('.faqs_content').not(dropDown).slideUp();
	dropDown.stop().slideToggle();
});