Ik ben dus bezig met een functie voor show en hide, maar ik loop vast.
kan iemand mij helpen:
CSS:
HTML
Java
kan iemand mij helpen met waarom de show more niet werkt?
alvast bedankt!
kan iemand mij helpen:
CSS:
Code:
div.text-container {
margin: 0 auto;
width: 75%;
}
.text-content{
line-height: 1em;
}
.short-text {
overflow: hidden;
height: 1em;
}
.full-text{
height: auto;
}
h1 {
font-size: 24px;
}
.show-more {
padding: 10px 0;
text-align: left;
height: auto;
}
Code:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>showHideTesting</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<script src="showHide.js"></script>
<link rel="stylesheet" type="text/css" href="showHideStyle.css">
</head>
<body>
<!-- de eerste die word opgehaald -->
<div class="text-container">
<h1>header1</h1>
<div class="text-content short-text">
text1 <br>
test <br>
test <br>
</div>
<div class="show-more">
<a href="#">Show more</a>
</div>
</div>
</body>
</html>
Code:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
// zet zodra de pagina word geladen dat de eerste 2 regels worden weergegeven.
$(".show-more a").each(function () {
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
console.log($link);
var visibleHeight = $content[0].clientHeight;
var actualHide = $content[0].scrollHeight - 1;
console.log(actualHide);
console.log(visibleHeight);
if (actualHide > visibleHeight) {
$link.show();
} else {
$link.hide();
}
});
// als je op de text show more click moet de rest ook worden weergegeven.
$(".show-more a").on("click", function () {
alert("joehoe");
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
var linkText = $link.text();
$content.toggleClass("short-text, full-text");
$link.text(getShowLinkText(linkText));
return false;
});
// haalt de huidige text op
function getShowLinkText(currentText) {
// variable newtext die leeg is
var newText = '';
// als de text niet gelijk is aan SHOW MORE dan word het show less, als het show less is word het show more
if (currentText.toUpperCase() === "SHOW MORE") {
newText = "Show less";
} else {
newText = "Show more";
}
// nu word de waarde wat in de variable newText is opgeslagen terug gegeven in HTML
return newText;
}kan iemand mij helpen met waarom de show more niet werkt?
alvast bedankt!
