Show/hide div with text
Question
I'm trying to make a read more type of button but can't get it to work right, for some reason the text will not be hidden and nothing happends when I click the link? I just can't seem to figure out whats wrong?
HTML CODE:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<title>Untitled Document</title>
<script>
$('.box').hide();
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
e.preventDefault();
$(this).next('.box').slideToggle('fast', function() {
$(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
});
});
});
</script>
</head>
<body>
<p><h3>Priser</h3></p>
<div class="container">
<div class="container">
<div class="fixed">Test af panel</div>
<div class="flex-item">795 kr.</div>
</div>
<a href="#" class="clickme">Show</a>
<div class="box">Ved installation af antenneforstærker vil du få besøg af vores tekniker som installerer 1 stk. antenneforstærker i dit hjem. Antenneforstærkeren er IKKE med i denne pris og skal købes ved siden af.</div>
</body>
</html>
CSS CODE:
.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;
}
.clickme:hover {
text-decoration: underline;
}
.box {
background-color: #ccc;
border-radius: 4px;
color: #333;
margin: 5px 0;
padding: 5px 10px;
width: auto;
}
5 answers
solution1
3 ACCPTED 2016-03-17 12:17:18
Have a look You miss few thing
.clickme { background-color: #eee; border-radius: 4px; color: #666; display: block; margin-bottom: 5px; padding: 5px 10px; text-decoration: none; } .clickme:hover { text-decoration: underline; } .box { background-color: #ccc; border-radius: 4px; color: #333; margin: 5px 0; padding: 5px 10px; width: auto; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.box').hide(); $('.clickme').each(function() { $(this).show(0).on('click', function(e) { e.preventDefault(); $(this).next('.box').slideToggle('fast', function() { $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show'); }); }); }); }); </script> </head> <body> <p> <h3>Priser</h3> </p> <div class="container"> <div class="container"> <div class="fixed">Test af panel</div> <div class="flex-item">795 kr.</div> </div> <a href="#" class="clickme">Show</a> <div class="box">Ved installation af antenneforstærker vil du få besøg af vores tekniker som installerer 1 stk. antenneforstærker i dit hjem. Antenneforstærkeren er IKKE med i denne pris og skal købes ved siden af.</div> </body> </html>
solution2
2 2016-03-17 12:13:55
You need to move your code to the end of the page before the closing body tag ( </body> ), or wrap it within a document ready call. You're executing code before the elements exist on the page.
Ex:
$( document ).ready(function() {
// Your code here
});
And on a side note, you can't have heading elements within paragraph elements.
solution3
0 2016-03-17 12:28:55
$("#click").click(function(){ $("#text").toggle(500); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="click">Click</a> <div id="text"> Hide Text </div>
solution4
0 2016-03-17 12:42:53
Here is my version.
- use an onload construct or move the code to after the link exists
- you assign too many click handlers
- Hide the box in CSS
- H3 cannot be a child of P
$(function() { $('.clickme').on('click', function(e) { e.preventDefault(); $link=$(this); $(this).next('.box').slideToggle('fast', function() { $link.html($(this).is(':visible') ? 'Hide' : 'Show'); }); }); });
.box { display: none } .clickme { background-color: #eee; border-radius: 4px; color: #666; display: block; margin-bottom: 5px; padding: 5px 10px; text-decoration: none; } .clickme:hover { text-decoration: underline; } .box { background-color: #ccc; border-radius: 4px; color: #333; margin: 5px 0; padding: 5px 10px; width: auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h3>Priser</h3> <div class="container"> <div class="container"> <div class="fixed">Test af panel</div> <div class="flex-item">795 kr.</div> </div> <a href="#" class="clickme">Show</a> <div class="box">Ved installation af antenneforstærker vil du få besøg af vores tekniker som installerer 1 stk. antenneforstærker i dit hjem. Antenneforstærkeren er IKKE med i denne pris og skal købes ved siden af.</div>
solution5
-1 2016-03-17 12:24:29
Must add your code At the end of the body so, after DOM loaded all elements can accessed. or other technique is:
window.onload = function(){
$('.box').hide();
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
e.preventDefault();
$(this).next('.box').slideToggle('fast', function() {
$(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
});
});
}})
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hide and show text by click on div
Show/hide text by spiting it with html comment in div
show/hide div based on text input
Show/hide a div depending on if cursor is in a text field
jQuery Hide/Show DIV on change of anchor text
Justify text in show hide div with CSS and Javascript
Show and Hide Div for the text that comes dynamically
Show and Hide div for shortening the text that comes dynamically
Show this div and hide that div
onmouseover show/ hide div and can select the text of div
Related Tags