Voorbeeldcode

Developer
Patrick Walburg
Size
2,841 Kb
Views
12,144
  1. Voorbeeldcode Previews
  2. Voorbeeldcode HTML Codes
  3. Voorbeeldcode CSS Codes
  4. Voorbeeldcode JS Codes

How do I make an voorbeeldcode?

What is a voorbeeldcode? How do you make a voorbeeldcode? This script and codes were developed by Patrick Walburg on 22 November 2022, Tuesday.

Voorbeeldcode Previews
IQ Test

Voorbeeldcode - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>voorbeeldcode</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="item"> <h3>Itemlijstje </h3> <div class="itemList"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Voorbeeldcode - Script Codes CSS Codes

/* DARK GREY */
.item { width: 20%;
}
.item h3 { margin: 0; font-weight: 400; color: black; font-size: 14px; background: #cdcdcd; padding: 10px; position: relative; cursor: pointer; border-radius: 5px 0; -webkit-transition: all, 0.5s, ease-out; transition: all, 0.5s, ease-out;
}
.item h3:after { content: "+"; display: block; position: absolute; top: 10px ; right: 10px; width: 20px; height: 20px; color: #000;
}
.item h3.open { border-radius: 5px 0 0 0;
}
.item h3.open:after { content: "-";
}
.item .itemList { margin-bottom: 20px; display: none; background: #e7e7e7; border-radius: 0 0 5px 0;
}
.item .itemList ul { margin: 20px 0 0; box-sizing: border-box;
}
.item .itemList ul.firstCol,
.item .itemList ul.secondCol { display: inline-block; width: 50%;
}
.item .itemList ul li { line-height: 30px; border: none; padding-left: 20px; padding: 0 5px; font-size: 13px;
}

Voorbeeldcode - Script Codes JS Codes

// splits list in two columns
if ($('.itemList').length) {	var parent = $('.itemList');	if (parent.find('li').length > 1) {	var firstCol = parent.find(' > ul:first-child'),	breakpoint = Math.ceil(firstCol.find('li').size() / 2) - 1;	firstCol.addClass('firstCol');	$('<ul class="secondCol" />').insertAfter(firstCol);	var secondCol = parent.find('ul.secondCol');	firstCol.find('li:gt(' + breakpoint + ')').appendTo(secondCol);	}
}
// toggles listview
$('.item h3').on('click', function (event) {	$(this).toggleClass('open');	$(this).parent().find('.itemList').slideToggle();	});
Voorbeeldcode - Script Codes
Voorbeeldcode - Script Codes
Home Page Home
Developer Patrick Walburg
Username tripack
Uploaded November 22, 2022
Rating 3
Size 2,841 Kb
Views 12,144
Do you need developer help for Voorbeeldcode?

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!

Patrick Walburg (tripack) Script Codes
Name
Animation study
Responvise design with sticky menu
A Pen by Patrick Walburg
Rollovers with transitions.
To do list
Banner-demo
Cofee and sugar
Study in Knockout.js
Hamburger css
Create amazing love letters 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!