Member Avatar for Niloofar24

Hello.
There is a button in the page when i click it, a div will appear or disappear by toggling to the left and right.
I want when the page loaded, user can only see the button and have to click to appear the dive.
But the problem is that when the page loads, the dive is appeared on the page and user doesn't have to click the button to see the content of the hidden div.
What can i do for that?
I want the div to stay hidden till user click the button to make it appear, not be appeared by default!

Edited by Niloofar24
  • 5 Contributors
  • 9 Replies
  • 498 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by lps
Member Avatar for gentlemedia

Use CSS or JS first (on page load) to hide it, but which method or properties depends on how you want to show it on click.

What do you have so far?

Member Avatar for Niloofar24

This is my code.
How can i hide it by css or js first?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
body{
margin: 0;
}
/***************************************************************/

@font-face {
    font-family: 'secondFont';
    src: url('DancingScript-Regular.otf');
}

h2 {
font-family: 'secondFont', sans-serif;
font-size: 20px;
}

/***************************************************************/

.nav {
float: left;
margin-top: 5px; /* Added to dont overlap result box */
width: 100px;
height: 70px;
text-align: center;
background-color: #C2FFC2;
border-radius: 20px;
border: 2px dotted #C2FFC2;
}

.text {
overflow: hidden;
float: left;
margin: 5px;
padding: 5px;
width: 400px;
border-radius: 20px;
border-top: 2px dotted #C2FFC2;
border-bottom: 2px dotted #C2FFC2;
}

.text > p {
font-family: 'secondFont', sans-serif;
font-size: 20px;
margin-left: 10px;
}

#js-greenbox1 {
position: absolute;
z-index: 2;
width: 600px;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- ************************************************************* --->

<div id="js-greenbox1">
    <div class="nav"><h2>greeting</h2></div>
    <div class="text">
    <p>Welcome guest!</p>
    </div>
</div>

<!-- ************************************************************* --->

<script>
$(function(){
    $('.nav').click(function() {
        $('.text p').css({
            'width': $('.text p').width(),
            'height': $('.text p').height()
        });
        $('.text').animate({'width': 'toggle'});
    });
});
</script>

</body>
</html>
Edited by Niloofar24
Member Avatar for jstfsklh211

use css display: none; will hide elements

Member Avatar for Niloofar24

Yes it works, thank you @jstfsklh211.

Member Avatar for Niloofar24

@jstfsklh211, i found a problem that i didn't attention to it before.

Without using display: none;, the output was like this:

first picture

And the only problem was appearing the div befor clicking the button by default when the page loads.

But now with using display: none;; the output is like this:

second picture

Now when the page loads, the div is disappeared by default and user have to click the button to appear the div by toggling, and it's ok.

But the problem is that as you see in the second picture, the height of the div is less than before and also the text in the div is broke down. The text was "Welcome guest!" but the only word is able to see is "Welcome".

If i set an amount for div's height and make it more higher, then the word "guest!" will be appeared under the word "Welcome".
Something like this:

Welcome
guest!

Anyway, who can i fix it? What is the problem? Why it happend?

Edited by Niloofar24
Member Avatar for Niloofar24

So there is no answer?!

Member Avatar for jstfsklh211

elements with display none set have no high/width

you'd need to remove the display:none; before can resize/toggle

with what you have now it looks like your setting each p to 0:height/width
which is whats killing everything for you

Member Avatar for lps

Remove your code of

$('.text p').css({
    'width': $('.text p').width(),
    'height': $('.text p').height()
});

I tested with the code below combining your css script and it is working fine.

$('.nav').click(function() {
    /*$('.text p').css({
        'width': $('.text p').width(),
        'height': $('.text p').height()
    });*/
    $('.text').toggle("slow");
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.