|
1
|
<!DOCTYPE html>
|
|
2
|
<html>
|
|
3
|
<head>
|
|
4
|
<meta charset="utf-8"/>
|
|
5
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
6
|
<script type="text/javascript">
|
|
7
|
|
|
8
|
function toggleContent(id){
|
|
9
|
if($('#expandable-info-' + id).css('display') == 'none'){
|
|
10
|
$('#expandable-info-' + id).slideDown();
|
|
11
|
$('#show-more-' + id).html('show less');
|
|
12
|
|
|
13
|
// AJAX CALL SHOULD HAPPEN HERE
|
|
14
|
//$.ajax({
|
|
15
|
// url: 'URL (SIP!)',
|
|
16
|
// type: 'GET',
|
|
17
|
// data: yourData,
|
|
18
|
// datatype: 'html',
|
|
19
|
// success: function (data) { successFunction(data); },
|
|
20
|
// error: function (jqXHR, textStatus, errorThrown) { errorFunction(); }
|
|
21
|
//});
|
|
22
|
|
|
23
|
} else {
|
|
24
|
$('#expandable-info-' + id).slideUp();
|
|
25
|
$('#show-more-' + id).html('show more');
|
|
26
|
}
|
|
27
|
}
|
|
28
|
|
|
29
|
|
|
30
|
</script>
|
|
31
|
|
|
32
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
|
|
33
|
|
|
34
|
|
|
35
|
</head>
|
|
36
|
|
|
37
|
<body>
|
|
38
|
<div class="alert alert-info" role="alert">
|
|
39
|
<div style="font-weight:bold;">Test Titel</div>
|
|
40
|
<div>
|
|
41
|
<a id="toggle-1" onclick="toggleContent(1)">
|
|
42
|
<span id="show-more-1">show more</span>
|
|
43
|
</a>
|
|
44
|
|
|
45
|
<div id="expandable-info-1" style="display:none;">
|
|
46
|
<hr>
|
|
47
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum tempus sapien a dignissim. Mauris gravida justo ligula, vel consectetur lacus volutpat ac. Aliquam ultrices dictum massa et sodales. Maecenas congue congue ante eget dignissim. Quisque lacinia, sem sit amet finibus congue, elit nisl vestibulum ipsum, eu lacinia augue ligula ut nulla. Ut posuere magna sit amet quam vehicula laoreet. Donec venenatis gravida neque, sed eleifend metus tempor sed. Etiam urna turpis, varius vel urna ac, sagittis ullamcorper est. In eget vehicula augue. Quisque dictum quam in sagittis maximus. Sed pulvinar risus a scelerisque sagittis. Mauris tortor orci, tempus id pretium consectetur, pharetra nec ante. Suspendisse eleifend elit vitae diam consectetur volutpat. Etiam ac nulla vestibulum, volutpat ex non, eleifend enim.
|
|
48
|
|
|
49
|
Fusce vehicula ipsum ipsum, sit amet aliquam massa lacinia id. Maecenas vitae euismod ante. Fusce semper mi lacus, a hendrerit tortor mollis sit amet. In pulvinar, odio vel accumsan euismod, libero justo faucibus est, vel aliquam velit dolor sed sem. Curabitur vulputate lorem at vestibulum ultrices. Ut nec neque eros. Etiam neque sapien, ultrices sit amet venenatis vitae, imperdiet eu nunc. Aenean luctus ex rhoncus, accumsan nisl quis, feugiat massa. Fusce interdum tortor eget velit feugiat, interdum pharetra dui egestas.
|
|
50
|
</div>
|
|
51
|
</div>
|
|
52
|
</div>
|
|
53
|
</body>
|
|
54
|
</html>
|
