Show/hide jquery using block / none

Question

Could anyone tell me how I can use this code to show and hide data between DIV`s (not to hide and show - I want the other way)?

I`m using in .js file:

function toggle(sDivId) {
                var oDiv = document.getElementById(sDivId);
                oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
}

And in .php file:

<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1">
    text here
    </div>
</div>

This code is working just fine but when the page is loading I wish to have text already hidden (not after when I click "Hide and show" text).

Thanks!

That's not jquery, and you can just hide the element with CSS or call your function on page load — omma2289
– omma2289, Commented Sep 21, 2013 at 18:02

Neeraj · Accepted Answer · 2013-09-21 18:06:46Z

1

$('#clickMe').click(function(){
 $('#divContent1').toggle();

});

Fiddle Demo

answered Sep 21, 2013 at 18:06

Neeraj

4,4898 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neeraj Over a year ago

Hey Thanks for acceptence .Please upvote and accepet as answer

Crwydryn · Accepted Answer · 2013-09-21 18:04:25Z

1

I may have misunderstood your question, but if you want the text hidden on page load can't you just stick a display:none tag, as follows:

<div id="divContent1" style="display: none">
text here
</div>

answered Sep 21, 2013 at 18:04

Crwydryn

8526 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can use the code you have but just add display:none; in the css. Or in the php inside the style="display:none;"

<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1" style="display:none;">
    text here
    </div>
</div>

jQuery has also a toogle() function you could use.

demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 21, 2013 at 18:01

user2802611

213 bronze badges

Comments

scotty · Accepted Answer · 2013-09-21 18:08:25Z

1

The code you provided isn't using jquery. If you'd like to do this using jquery you can change things to something like this.

function toggle(sDivId) {
    $("#"+sDivId).toggle();
}

and to your php block you'll want to add display:none; to initially hide the inner div

<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1" style='display:none'>
    text here
    </div>
</div>

answered Sep 21, 2013 at 18:08

scotty

5594 silver badges6 bronze badges

Comments

halkujabra · Accepted Answer · 2013-09-21 18:03:36Z

0

You can use toggle() function to alternately switch between show() and hide(). Otherwise, use the show() and hide() functions directly.

answered Sep 21, 2013 at 18:03

halkujabra

2,9524 gold badges28 silver badges38 bronze badges

Comments

Nishad K Ahamed · Accepted Answer · 2013-09-21 18:07:43Z

0

call the function toggle('divContent1') at onload event of the body

<body onload="toggle('divContent1')">

answered Sep 21, 2013 at 18:07

Nishad K Ahamed

1,39415 silver badges25 bronze badges

Comments

Amit Singh · Accepted Answer · 2013-09-21 18:09:41Z

0

Use this code :

function load(){
   document.getElementByID('divContent1').style.display = 'none';
}

and in your html

<body onLoad = "load()">

answered Sep 21, 2013 at 18:09

Amit Singh

2,2754 gold badges27 silver badges50 bronze badges

Collectives™ on Stack Overflow

Show/hide jquery using block / none

7 Answers 7

1 Comment

Comments

demo

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related