<div class="form-toogle max-wid-500">
	<label class="span-title">¿Desplegar campo oculto?</label>
	<div class="toggle secondary">
		<p>No</p>
		<label class="switch mx-2 mb-0">
			<input id="chekPolExp" type="checkbox">
			<span class="slider"></span>
		</label>
		<p>Si</p>
	</div>
</div>

<div id="inputPolExp" class="max-wid-500">
	<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum animi autem, facere placeat ex iure atque tenetur vero quod, suscipit dolores soluta repudiandae mollitia ipsam corrupti. Tempore nam dolorem rerum.</p>
</div>
//Barlow
@import url('//fonts.googleapis.com/css?family=Barlow:300,300i,400,400i,500,500i,700,700i&display=swap');

//variables
$gray2: #c7c7c7;
$gray3: #eeeeee;
$black: #000;

$primary: #0033a0;
$secondary: #00aec7;
$dark: #53565a;

$font-secondary: 'Barlow', sans-serif;

.text-secondary {
    color: $secondary !important;
}

.text-primary {
    color: $primary !important;
}

body {
	font-family: $font-secondary;
	padding: 60px;
	background-color: #ecf0f1;
	color: $dark;
}

.text {
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid $dark;
	padding: 20px;
	border-radius: 5px;
	margin-top: 10px;
}

.max-wid-500 {
	max-width: 500px;
	margin: auto;
}

.span-title {
	color: #0033a0;
	font-size: 0.875rem;
	margin-bottom: 7px;
	margin-top: 15px;
	margin-left: 16px;
	line-height: 1.3;
}

#inputPolExp {
	display: none;
}

.form-toogle {
	.toggle {
		padding: 0 20px;
		margin-bottom: 0;
		height: 48px;
	}
}

//toggles
.toggle {
	display: flex;
	align-items: center;
	margin-bottom: 30px;

	&.disabled {
		p {
			color: $gray2;
		}
	}

	p {
		margin-bottom: 1px;
		font-family: $font-secondary;
		font-weight: normal;
		color: $dark;
	}

	.switch {
		display: inline-block;
		width: 40px;
		height: 20px;
		margin: 0;
		position: relative;

		input {
			display: none;

			&:checked+.slider {

				&:after {
					transform: translateX(20px);
					background: $primary;
				}

				&:before {
					background-color: $primary;
					opacity: .5;
				}
			}

			&:disabled+.slider {

				&:after {
					background: $gray3;
				}

				&:before {
					background-color: $gray2;
					opacity: 1;
				}
			}
		}

		.slider {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 30px;
			cursor: pointer;
			overflow: hidden;
			transition: .4s;

			&:after {
				position: absolute;
				content: "";
				width: 100%;
				height: 100%;
				background: $gray2;
				border-radius: 20px;
				transform: translateX(-20px);
				transition: .4s;
				//box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 0 1px 0 rgba(0, 0, 0, 0.12);
			}

			&:before {
				position: absolute;
				content: "";
				width: 34px;
				height: 14px;
				background-color: $black;
				opacity: .38;
				border-radius: 30px;
				transition: .4s;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}

	&.secondary {
		.switch {
			input {
				&:checked+.slider {

					&:after {
						background: $secondary;
					}

					&:before {
						background-color: $secondary;
					}
				}

			}
		}
	}
}
View Compiled
//Change text and color toggles
var check = $('.switch input');
check.val($(this).is(':checked'));

check.change(function () {
	if ($(this).is(":checked")) {
			if ($(this).parents('.toggle').hasClass("secondary")) {
					$(this).parent().next('p').addClass('text-secondary');
			} else {
					$(this).parent().next('p').addClass('text-primary');
			}
	} else {
			$(this).parent().next('p').removeClass('text-secondary').removeClass('text-primary');
	}
});


//Ocultar/mostrar - checkbox
hideChekbox('#chekPolExp', '#inputPolExp');

function hideChekbox(id, idelement) {
	var checkbox = $(id);
	var element = $(idelement);
	checkbox.change(function () {
		if ($(this).is(":checked")) {
			element.fadeIn(300);
		} else {
			element.fadeOut(300);
		}
	});
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

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