CODEWITHSUNDEEP
javascriptjqueryhtmltoggleshow-hide
cnr_eps
cnr_eps

Reputation: 75

jQuery toggle hide text first

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!

Upvotes: 2

Views: 614

Answers (3)

Tavish Aggarwal
Tavish Aggarwal

Reputation: 1060

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>

Upvotes: 0

vicky patel
vicky patel

Reputation: 705

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337626

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.

Upvotes: 2

Related Questions