Col togglers

Developer
Anton Staroverov
Size
9,268 Kb
Views
14,168
  1. Col togglers Previews
  2. Col togglers HTML Codes
  3. Col togglers CSS Codes
  4. Col togglers JS Codes

How do I make an col togglers?

What is a col togglers? How do you make a col togglers? This script and codes were developed by Anton Staroverov on 18 November 2022, Friday.

Col togglers Previews
IQ Test

Col togglers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Col togglers</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='css/https___raw_githubusercon.css'>
<link rel='stylesheet prefetch' href='css/https___raw_githubusercon.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row row-maximize"> <div id="first" class="col-md-3 col-lg-2"> <a href="#first" data-toggle="maximize" class="btn btn-default">Expand</a> </div> <div id="second" class="col-md-3 col-lg-4"> <a href="#second" data-toggle="maximize" class="btn btn-default">Expand</a> </div> <div id="third" class="col-md-3 col-lg-2"> <a href="#third" data-toggle="maximize" class="btn btn-default">Expand</a> </div> <div id="fourth" class="col-md-3 col-lg-4"> <a href="#fourth" data-toggle="maximize" class="btn btn-default">Expand</a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Col togglers - Script Codes CSS Codes

// Overlap:
.calc-grid-column(@index, @class, @type) when (@type = overlap) { .col-@{class}-overlap-@{index} { margin-left: percentage(-(@index / @grid-columns)); }
}
.calc-grid-column(@index, @class, @type) when (@type = overlapped) { .col-@{class}-overlapped-@{index} { margin-right: percentage(-(@index / @grid-columns)); }
}
.make-overlap(@class) { .loop-grid-columns(@grid-columns, @class, overlap); .loop-grid-columns(@grid-columns, @class, overlapped);
}
.make-overlap(xs);
@media (min-width: @screen-sm-min) { .make-overlap(sm);
}
@media (min-width: @screen-md-min) { .make-overlap(md);
}
@media (min-width: @screen-lg-min) { .make-overlap(lg);
}
// Maximize:
.row-maximize { > * { transition: margin 0.5s, width 0.5s; &:last-child { margin-right: -1px; } }
}
// Custom:
*[class^="col-"] { text-align: center; height: 15rem; padding-top: 6rem; &:nth-child(1) { background: rgba(255, 0, 0, 0.5); } &:nth-child(2) { background: rgba(0, 255, 0, 0.5); } &:nth-child(3) { background: rgba(0, 0, 255, 0.5); } &:nth-child(4) { background: rgba(0, 255, 255, 0.5); }
}

Col togglers - Script Codes JS Codes

// Maximize:
$('.row-maximize').each(function () { calcOverlap($(this)); });
$('[data-toggle="maximize"').on('click', function (e) { e.preventDefault(); var $this = $(this), href = $this.attr('href'), $target = $(href); $target.siblings().css('position', 'static'); $target.css('position', 'relative').toggleClass($target.data('toggle-class'));
});
function calcOverlap($row) { var cols_before = {}; $row.children().each(function () { var $col = $(this), cls = $col.attr('class'), toggle_cls = cls + ' col-xs-12', re = /col-(\w\w)-(\d\d?)/gi, match; while (match = re.exec(cls)) { var screen = match[1], cols = parseInt(match[2]); if (!(screen in cols_before)) cols_before[screen] = 0; toggle_cls += ' col-' + screen + '-overlap-' + cols_before[screen] + ' col-' + screen + '-overlapped-' + (12 - cols_before[screen] - cols); cols_before[screen] += cols; } $col.attr('data-toggle-class', toggle_cls); });
}
Col togglers - Script Codes
Col togglers - Script Codes
Home Page Home
Developer Anton Staroverov
Username tonystar
Uploaded November 18, 2022
Rating 3
Size 9,268 Kb
Views 14,168
Do you need developer help for Col togglers?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Staroverov (tonystar) Script Codes
Name
Loader
Bootstrap 4 Float Label
Bootstrap 4 Floating Labels
Bootstrap 3 Float Label
Bootstrap Perfect
Bootstrap Template
Pure-CSS 3D Spinning Text
Flag
Container and clip path
Bootstrap Hover Tabs
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!