הצגת סיבות למה כן ולמה לא עם SlideToggle

2208
28-05-2015

תיאור:

סניפט מעולה שעוזר להציג סיבות חיוביות למה כן ולמה לא לאיזושהיא שאלה (לבחירתכם). ממש קל להתאים לצרכים שלכם ועם 4 שורות קוד בjQuery קל ומהיר. אפשר כמובן לנצל את הסקריפט להציג מידע שונה ולשנות את המיקום של המידע. שימו לב יש לקנות את התמונות בדוגמה החיה כיוון שהן דורשות רשיון משתמש.

first קוד:

jQuery(function ($) {
	$('.thumbsupImg').on('click', function() {
		$('#thumbsup').slideToggle(200);
        $('#thumbsdown').slideUp(100);
    })
	$('.thumbsdownImg').on('click', function() {
		$('#thumbsdown').slideToggle(200);
        $('#thumbsup').slideUp(100);
    })
});

second קוד:

<div class="container">
	<div class="thumbs fleft">
		<div width="76px"><a href="#" class="thumbsupImg"><img src="https://farm6.staticflickr.com/5331/9213587711_2722faa215_o.jpg" alt="Thumbs Down"></a></div>
		<div width="76px"><a href="#" class="thumbsdownImg"><img src="https://farm4.staticflickr.com/3710/9213587763_873ccf77cd_o.jpg" alt="Thumbs Down" /></a></div>
	</div>
	<div class="data fleft">
		<div id="thumbsup" class="dnone reasons">
			<ul>
				<li>Just cuz' its cool!</li>
				<li>Since your already here</li>
				<li>Why not actually</li>
			</ul>
		</div>
		<div id="thumbsdown" class="dnone reasons">
			<ul>
				<li>You already got this</li>
				<li>You really must go</li>
				<li>You'd rather play starcraft.</li>
			</ul>
		</div>
	</div>
</div>

third קוד:

.container {margin: 10%;}
.thumbs {border: 1px solid #eee; width: 90px;}
.reasons {padding: 10px 20px 10px 10px; background: #f3f3f3;}
.dnone {display: none;}
.fleft {float: left;}