Hi to everyone
I wonder if anyone can explain to us how to expand and collapse a plain text in a new Topic Page.
The next 25 may in Europe it will change the privacy law and I would like to write a plain understandable text for our customers with the expandable text.
I've tried something like that:
<html>
<head>
<style type="text/css">
.row { vertical-align: top; height:auto !important; }
.list {display:none; }
.show {display: none; }
.hide:target + .show {display: inline; }
.hide:target {display: none; }
.hide:target ~ .list {display:inline; }
@media print { .hide, .show { display: none; } }
</style>
</head>
<body>
<div class="row">
<a href="#hide1" class="hide" id="hide1">Expand</a>
<a href="#show1" class="show" id="show1">Collapse</a>
<div class="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
</html>
But does't work at all.
Can anyone help us?
Thank you
Lorenzo
Expand and collapse text in a new topic page
- 1
- 2
- 39
- 369
- 3/26/2013
- United States
try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#clickme" ).click(function() {
$( "#list" ).toggle( "slow", function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div class="row">
<a href="#hide1" class="hide" id="clickme">Toggle</a>
<div class="list" id="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#clickme" ).click(function() {
$( "#list" ).toggle( "slow", function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div class="row">
<a href="#hide1" class="hide" id="clickme">Toggle</a>
<div class="list" id="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
</html>
- 39
- 369
- 3/26/2013
- United States
<html>
<head>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#clickme" ).click(function() {
$( "#list2" ).toggle( "slow", function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div class="row">
<a href="#hide1" class="hide" id="clickme">Toggle</a>
<div class="list" id="list">
<ul>
<li>Item 1</li>
<div id="list2">
<li>Item 2</li>
<li>Item 3</li>
</div>
</ul>
</div>
</div>
</body>
</html>
<head>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#clickme" ).click(function() {
$( "#list2" ).toggle( "slow", function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div class="row">
<a href="#hide1" class="hide" id="clickme">Toggle</a>
<div class="list" id="list">
<ul>
<li>Item 1</li>
<div id="list2">
<li>Item 2</li>
<li>Item 3</li>
</div>
</ul>
</div>
</div>
</body>
</html>
- 1
- 2