CODEWITHSUNDEEP
javascripthtmlcsshideshow
Sverkel
Sverkel

Reputation: 7

Show/hide div with text

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;
}

Upvotes: 0

Views: 1930

Answers (5)

mplungjan
mplungjan

Reputation: 177940

Here is my version.

  1. use an onload construct or move the code to after the link exists
  2. you assign too many click handlers
  3. Hide the box in CSS
  4. 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>

Upvotes: 0

ankit
ankit

Reputation: 125

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');
            });
        });
    }})
};

Upvotes: -1

Mustafa K&#220;&#199;&#220;K
Mustafa K&#220;&#199;&#220;K

Reputation: 107

$("#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>

Live demo

Upvotes: 0

Head In Cloud
Head In Cloud

Reputation: 2051

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>

Upvotes: 3

j08691
j08691

Reputation: 207901

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
});

jsFiddle example

And on a side note, you can't have heading elements within paragraph elements.

Upvotes: 2

Related Questions