$(document).ready(function () { // roztvoreny obsah zatvori $(this).on('click',".box, .dropdown", function (e) { // Efekt zatvorenia // $(this).hide(); // $(this).slideUp("slow"); $(this).fadeOut("slow"); }); // zavesenie akcii na zobrazene boxy, aby roztvarali dalsi obsah $(this).on('click',".box, .box div", function (e) { e.stopPropagation(); var drop = $(this).siblings('.dropdown'); // ak je dalsi text skryty, urob toto if (drop.is(":hidden")) { $('.title_active').removeClass("title_active") // najprv vypni pripadne zobrazene ostatne boxy .siblings('.dropdown').hide(); // efekt otvorenia // drop.show(); // drop.slideDown( "slow" ); drop.fadeIn( "slow" ); // pripadne zmeny vzhladu $(this).addClass("title_active"); $(this).parent().addClass("ms_active"); } else { // efekt zatvorenia // drop.hide(); // drop.slideUp("slow"); drop.fadeOut("slow"); $(this).removeClass("title_active"); } }); });
<div class="box"> <div class="headline">dsd asd sdf <A href="http://www.madaj.net/">dsf sdfs</a> dfsd </div> <div class="more">more</div> <div class="dropdown"> Content prvy </div> <!-- md --> </div> <!-- ms --> <div class="box"> <div class="headline">dsd asd sdf dsf sdfs dfsd </div> <div class="more">more</div> <div class="dropdown"> Content druhy </div> <!-- md --> </div> <!-- ms --> <div class="box"> <div class="headline">dsd asd sdf dsf sdfs dfsd </div> <div class="more">more</div> <div class="dropdown"> Content treti </div> <!-- md --> </div> <!-- ms -->
body { background:#555555; } .box{ background:#ffffff; margin:1px; width:25%; float:left; padding:8px; } .more { text-align:center; } .dropdown{ /* height: 40px; width: 150px; position: absolute; top: 20px; left: -1px; overflow: scoll; border: 1px solid #909090; */ display: none; position: fixed; background:#d2d2d2; top: 0; left: 0; bottom: 0; right: 0; z-index:100000; padding:32px; } .title_active{ }