jQuery toggle hide text first

user_7643619 0
Viewed 407

I've searched for a solution for my problem and could find a few approaches, however, none of them worked as expected. So, this is my try to understand the jQuery toggle-function. I hope you can help me!

  1. The issue: I would like to hide text and make it visible after clicking on a button/link.
  2. The solution: The toggle-function. Unfortunately, this shows the text first and hides it after clicking the button/link.
  3. The code: So, I found this code from an older post here on stack (sorry, I can't find the author, if it's you - please text me and I'll credit you properly.)

The script:

function toggle_visibility(id) {
  var e = document.getElementById(id);
  e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}

document.getElementById('showDiv').onclick=function(){
  // Remove any element-specific value, falling back to stylesheets
  document.getElementById('element').style.display='';
};

In my html body-part I used the following code:

<a onclick="toggle_visibility('private');">
  <b>» Private Enquity / Venture Capital</b>
</a>
<div id="private">
  <p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p>
</div>

The toggle function works as described, but how can I make the text inside hide until the link is clicked? I'm super new to this and appreciate your help.

Thank you!

show-hide toggle html jquery javascript
3 Answers

To make the element hidden by default use CSS: display: none. You can also make the code work with an unobtrusive event handler (which is preferred over the outdated on* event attributes) and jQuery's toggle() method, like this:

$(function() {
  $('.toggle').click(function(e) {
    e.preventDefault();
    $(this).next('.private').toggle();
  });
});   
.private { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="toggle"><b>» Private Enquity / Venture Capital</b></a>
<div class="private">
  <p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p>
</div>

Note that I changed the id to a class as this mechanism is often repeated throughout a page, which would lead to repeated id attribute which is invalid HTML.

user_5194130

Hope this Help!

function toggle_visibility(id) {
    var e = document.getElementById(id);
     //e.style.display = ((e.style.display!='none') ? 'none' : 'block');
    }
               
    document.getElementById('showDiv').onclick=function(){
      // Remove any element-specific value, falling back to stylesheets
      $('#element').toggleClass('display');
      // $('#element2').toggleClass('display');
    };
.display {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" onclick="toggle_visibility('private');">
      <b id="showDiv">» Private Enquity / Venture Capital</b>
</a>

<p id="element" class="display">In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p>

user_37330260 

$(document).ready(function(){
$("a").click(function(){
$("#private").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
  <b>» Private Enquity / Venture Capital</b>
</a>
<div id="private">
  <p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p>
</div>

user_83530190
Related