איך עושים תיבת Toggle בעזרת html וjQuery

מה אנחנו צריכים?

דוגמאות של תיבת Toggle

איך עובדת תיבת Toggle?

תיבת Toggle היא כמה מיכלים (div's) אשר נמצאים אחד בתוך או אחד לצד השני. אנו מחביאים את הטקסט בעזרת Css והופכים אותו לנראה כאשר משתמש לוחץ על הכותרת של המיכל (קופסת הToggle) בעזרת שפת jQuery.

ההסבר המלא:

הקוד נקי:

קוד הHTML

<div class="toggleExample togglebox">
	<div class="toggle_title" data-show="text-02">toggle box title <span class="toggle-marker">+</span></div>
	<div class="text-02 hidden-text">This is the inner hidden text</div>
</div>

קוד הCSS

.toggle_title {background: #F3F3F3;padding: 10px;border: 1px solid #CCC; cursor: pointer;}
.hidden-text {display: none; background: #f9f9f9;padding: 3%;font-size: 13px;}
.toggle-marker {float: left; margin: 0 10px;}

קוד הJQUERY

<script type="text/javascript">
jQuery(function($){
	$('.toggle_title').click(function() {
		
		var showthis		=	'.' + $(this).attr('data-show');
		var togglemarker	=	'.' + $(this).attr('data-show');
		
		$(this).toggleClass('opentab');
		$(showthis).slideToggle('fast');
		
		if($(this).hasClass('opentab')) {
			$(this).children('.toggle-marker').text('-');
		}
		else {
			$(this).children('.toggle-marker').text('+');
		}
		
	});
})
</script>

סיימנו ותתחדשו – יש לכם קופסת Toggle חדשה

אני מקווה שכעת אתם חמושים בקופסת Toggle חדשה אבל יותר חשוב מזה בידע המתאים ליצור כמה אלמנטים כאלו שתרצו. אם אהבתם אל תשכחו לפרגן עם לייק או טוויט, נתראה במדריך הבא!