Div met hide/vissible
Ik heb een scriptje gemaakt wat van een lap tekst een kort tekstje maakt met een lees meer knop erbij.
Dit laat ik met javascript schakelen tussen hide en vissible.
Nu zou ik graag dat de gehele tekst als je op de knop drukt op dezelfde plaats komt te staan als de korte tekst.
Voor een voorbeeld zie:
http://www.zscwesterhoven.nl/test.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<script type="text/javascript">
function beginfase()
{
document.getElementById('completetekst').style.visibility = 'hidden';
}
function showall(value)
{
if(document.getElementById('completetekst').style.visibility == 'hidden')
{
document.getElementById('kortetekst').style.visibility = 'hidden';
document.getElementById('completetekst').style.visibility = 'visible';
}
else
{
document.getElementById('completetekst').style.visibility = 'hidden';
}
}
</script>
</head>
<body onload="beginfase();">
<?
$aantalwoorden = 5;
$tekst = 'Dit is een Test voor bla bla as sadf ksdflj sdifjsdf isdfjk dsisdfkjdsf idsfkjdsf idfksj fkjsdf sfkjdsf sdfksdjf sldfjl sdjfkl sdfiojsd fsjdfijsfijsdifjsjdf jlsks di sjf klsdjfs';
$woorden = explode(" ", $tekst);
$totaalwoorden = count($woorden);
if ( $totaalwoorden > $aantalwoorden ) {
echo '<div id="kortetekst" style="position:top">';
for ($i = 0; $i < $aantalwoorden; $i++) {
if ( $kortetekst == '' ) {
$kortetekst = $woorden[$i];
}
else {
$kortetekst .= ' '. $woorden[$i];
}
}
$kortetekst .= '.....';
echo $kortetekst;
echo '<br>';
echo '<a onclick="showall();"><p style="text-align:right;"><i style="font-size:90%;">Lees meer...</i></p></a><br>';
echo '</div>';
echo '<div id="completetekst" style="position:top">';
echo $tekst;
echo '</div>';
}
else {
echo $tekst;
}
?>
</body>
</html>
<head>
<script type="text/javascript">
function beginfase()
{
document.getElementById('completetekst').style.visibility = 'hidden';
}
function showall(value)
{
if(document.getElementById('completetekst').style.visibility == 'hidden')
{
document.getElementById('kortetekst').style.visibility = 'hidden';
document.getElementById('completetekst').style.visibility = 'visible';
}
else
{
document.getElementById('completetekst').style.visibility = 'hidden';
}
}
</script>
</head>
<body onload="beginfase();">
<?
$aantalwoorden = 5;
$tekst = 'Dit is een Test voor bla bla as sadf ksdflj sdifjsdf isdfjk dsisdfkjdsf idsfkjdsf idfksj fkjsdf sfkjdsf sdfksdjf sldfjl sdjfkl sdfiojsd fsjdfijsfijsdifjsjdf jlsks di sjf klsdjfs';
$woorden = explode(" ", $tekst);
$totaalwoorden = count($woorden);
if ( $totaalwoorden > $aantalwoorden ) {
echo '<div id="kortetekst" style="position:top">';
for ($i = 0; $i < $aantalwoorden; $i++) {
if ( $kortetekst == '' ) {
$kortetekst = $woorden[$i];
}
else {
$kortetekst .= ' '. $woorden[$i];
}
}
$kortetekst .= '.....';
echo $kortetekst;
echo '<br>';
echo '<a onclick="showall();"><p style="text-align:right;"><i style="font-size:90%;">Lees meer...</i></p></a><br>';
echo '</div>';
echo '<div id="completetekst" style="position:top">';
echo $tekst;
echo '</div>';
}
else {
echo $tekst;
}
?>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/*
* jQuery Shorten plugin 1.0.0
*
* Copyright (c) 2013 Viral Patel
* http://viralpatel.net
*
* Dual licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
$.fn.shorten = function (settings) {
var config = {
showChars: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};
if (settings) {
$.extend(config, settings);
}
$(document).off("click", '.morelink');
$(document).on({click: function () {
var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle();
$this.prev().toggle();
return false;
}
}, '.morelink');
return this.each(function () {
var $this = $(this);
if($this.hasClass("shortened")) return;
$this.addClass("shortened");
var content = $this.html();
if (content.length > config.showChars) {
var c = content.substr(0, config.showChars);
var h = content.substr(config.showChars, content.length - config.showChars);
var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="#" class="morelink">' + config.moreText + '</a></span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);
$(".shout_comment").shorten({
"showChars" : 50,
"moreText" : "Lees meer",
"lessText" : "Lees minder",
});
* jQuery Shorten plugin 1.0.0
*
* Copyright (c) 2013 Viral Patel
* http://viralpatel.net
*
* Dual licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
$.fn.shorten = function (settings) {
var config = {
showChars: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};
if (settings) {
$.extend(config, settings);
}
$(document).off("click", '.morelink');
$(document).on({click: function () {
var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle();
$this.prev().toggle();
return false;
}
}, '.morelink');
return this.each(function () {
var $this = $(this);
if($this.hasClass("shortened")) return;
$this.addClass("shortened");
var content = $this.html();
if (content.length > config.showChars) {
var c = content.substr(0, config.showChars);
var h = content.substr(config.showChars, content.length - config.showChars);
var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="#" class="morelink">' + config.moreText + '</a></span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);
$(".shout_comment").shorten({
"showChars" : 50,
"moreText" : "Lees meer",
"lessText" : "Lees minder",
});
Plaats geen <p> binnen een <a>. maar doe dit:
Code (php)
1
<p class="right"><a onclick="showall();">Lees meer...</a></p>
inline css: niet doen! Gebruik bij voorkeur een separaat css bestand of zet de css tussen de <style> tags in je header.
verander visability:...; naar display:none; of display:block;
Je kunt met de CSS direct de div 'completetekst' verbergen om mee te beginnen. Javascript is hier niet voor nodig
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:90%;
font-style:italic;
}
.right {
text-align:right;
}
#kortetekst {
width:400px;
}
#completetekst {
display:none;
}
</style>
<script type="text/javascript">
function showall(value)
{
if(document.getElementById('completetekst').style.display == 'none')
{
document.getElementById('kortetekst').style.display = 'none';
document.getElementById('completetekst').style.display = 'block';
}
else
{
document.getElementById('completetekst').style.display = 'none';
}
}
</script>
</head>
<body>
<div id="kortetekst" style="position:top">
Dit is een Test voor.....<br>
<p class="right"><a onclick="showall();">Lees meer...</a></p><br>
</div>
<div id="completetekst">
Dit is een Test voor bla bla as sadf ksdflj sdifjsdf isdfjk dsisdfkjdsf idsfkjdsf idfksj fkjsdf sfkjdsf sdfksdjf sldfjl sdjfkl sdfiojsd fsjdfijsfijsdifjsjdf jlsks di sjf klsdjfs
</div>
</body>
</html>
<head>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:90%;
font-style:italic;
}
.right {
text-align:right;
}
#kortetekst {
width:400px;
}
#completetekst {
display:none;
}
</style>
<script type="text/javascript">
function showall(value)
{
if(document.getElementById('completetekst').style.display == 'none')
{
document.getElementById('kortetekst').style.display = 'none';
document.getElementById('completetekst').style.display = 'block';
}
else
{
document.getElementById('completetekst').style.display = 'none';
}
}
</script>
</head>
<body>
<div id="kortetekst" style="position:top">
Dit is een Test voor.....<br>
<p class="right"><a onclick="showall();">Lees meer...</a></p><br>
</div>
<div id="completetekst">
Dit is een Test voor bla bla as sadf ksdflj sdifjsdf isdfjk dsisdfkjdsf idsfkjdsf idfksj fkjsdf sfkjdsf sdfksdjf sldfjl sdjfkl sdfiojsd fsjdfijsfijsdifjsjdf jlsks di sjf klsdjfs
</div>
</body>
</html>
Maar als ik nu straks meerdere 'nieuwsberichten' heb krijgen deze allemaal een ander id. Nu dacht ik dit in mijn javascript te regelen met een variabel wat ik meegeef, maar javascript is me toch nog wat lastig dus als iemand me hiermee wat kan helpen/uitleggen dan zou dit heel fijn zijn.
Dit is wat ik nu heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<head>
<link href="css/nieuws.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
function showall(value){
var x = value; //dit zou eigenlijk moeten zijn nieuws_1l of nieuws_1m enz.. 2l,2m 3l,3m
if([x].style.display == 'none' || [x].style.display == '') {
[x].style.display = 'none';
[x].style.display = 'block';
}
else {
[x].style.display = 'none';
[x].style.display = 'block';
}
}
</script>
</head>
<body>
<?
$aantalwoorden = 5;
$tekst = 'Dit is een Test voor bla bla as sadf ksdflj sdifjsdf isdfjk dsisdfkjdsf idsfkjdsf idfksj fkjsdf sfkjdsf sdfksdjf sldfjl sdjfkl sdfiojsd fsjdfijsfijsdifjsjdf jlsks di sjf klsdjfs';
$woorden = explode(" ", $tekst);
$totaalwoorden = count($woorden);
if ( $totaalwoorden > $aantalwoorden ) {
echo '<div class="kortetekst" id="nieuws_1l">';
for ($i = 0; $i < $aantalwoorden; $i++) {
if ( $kortetekst == '' ) {
$kortetekst = $woorden[$i];
}
else {
$kortetekst .= ' '. $woorden[$i];
}
}
$kortetekst .= '.....';
echo $kortetekst;
echo '<br>';
echo '<p class="nieuwsmeer"><a onclick="showall(1m);">Lees meer...</a></p><br>';
echo '</div>';
echo '<div class="completetekst" id="nieuws_1m">';
echo $tekst;
echo '<br>';
echo '<p class="nieuwsmeer"><a onclick="showall(1l);">Lees minder...</a></p><br>';
echo '</div>';
}
else {
echo $tekst;
}
?>
</body>
</html>
<head>
<link href="css/nieuws.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
function showall(value){
var x = value; //dit zou eigenlijk moeten zijn nieuws_1l of nieuws_1m enz.. 2l,2m 3l,3m
if([x].style.display == 'none' || [x].style.display == '') {
[x].style.display = 'none';
[x].style.display = 'block';
}
else {
[x].style.display = 'none';
[x].style.display = 'block';
}
}
</script>
</head>
<body>
<?
$aantalwoorden = 5;
$tekst = 'Dit is een Test voor bla bla as sadf ksdflj sdifjsdf isdfjk dsisdfkjdsf idsfkjdsf idfksj fkjsdf sfkjdsf sdfksdjf sldfjl sdjfkl sdfiojsd fsjdfijsfijsdifjsjdf jlsks di sjf klsdjfs';
$woorden = explode(" ", $tekst);
$totaalwoorden = count($woorden);
if ( $totaalwoorden > $aantalwoorden ) {
echo '<div class="kortetekst" id="nieuws_1l">';
for ($i = 0; $i < $aantalwoorden; $i++) {
if ( $kortetekst == '' ) {
$kortetekst = $woorden[$i];
}
else {
$kortetekst .= ' '. $woorden[$i];
}
}
$kortetekst .= '.....';
echo $kortetekst;
echo '<br>';
echo '<p class="nieuwsmeer"><a onclick="showall(1m);">Lees meer...</a></p><br>';
echo '</div>';
echo '<div class="completetekst" id="nieuws_1m">';
echo $tekst;
echo '<br>';
echo '<p class="nieuwsmeer"><a onclick="showall(1l);">Lees minder...</a></p><br>';
echo '</div>';
}
else {
echo $tekst;
}
?>
</body>
</html>
En zeker niet wanneer het enkel om het groter maken van een <div> gaat of het verbergen of tevoorschijn halen van een div.
In html moet de attribuut id altijd uniek zijn maar de attribuut class niet. Dus wanneer je meerdere van die news divjes gaat maken dan werk je altijd met class.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="news-div">
...
</div>
<div class="news-div">
...
</div>
<div class="news-div">
...
</div>
...
</div>
<div class="news-div">
...
</div>
<div class="news-div">
...
</div>
Daarom dacht ik ik geef ze een id mee bijvoorbeeld id="nieuws_1" id="nieuws_2" en dan kan ik bij mijn knop meegeven welk id hij open of dicht moet vouwen....
Begrijp je? En kan ik hier dan iets mee?
stay tuned...
Toevoeging op 21/09/2014 23:20:09:
http://codepen.io/anon/pen/AJuer
Toevoeging op 21/09/2014 23:52:36:
Even een zijsprong...
Met dit werk is jQuery wel makkelijker: http://learn.jquery.com/
Toevoeging op 22/09/2014 00:18:05:
Een andere veel gebruikte methode is door inderdaad ieder div een (uniek) id te geven en dit zelfde id aan de <a> mee te geven als data-id:
http://codepen.io/anon/pen/vnbuq