Show/Hide Div with JavaScript [or CSS]

Report · Jul 08, 2018

Hello,

I am having trouble getting my code to work correctly. I want to show content based on what the person clicks. I know it's probably better to write in a switch statement, but I wanted to figure it out with and if/else statement first. Could someone please tell me what I am doing wrong.

HTML

<ul>

<button onclick="alertName(this)" class="subjectList" id="Reading">Reading</button>

<button onclick="alertName(this)" class="subjectListScience" id="Science">Science</button>

<button onclick="alertName(this)" class="subjectListEnglish" id="English">English</button>

<button onclick="alertName(this)" class="subjectListHomework" id="Homework">Homework</button>

<button onclick="alertName(this)" class="subjectListStudySkills" id="Skills">Study Skillls</button>

<button onclick="alertName(this)" class="subjectListSummerCamps" id="Camps">Summer Camps</button>

</ul>

</nav>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

JAVASCRIPT

function alertName(a)

{

if(a.id == 'Reading')

{

var x = document.getElementsByClassName('readingContent');

if (x.style.display === "none")

{

x.style.display = 'block';

x.style.visibility = 'visible';

}

else

{

x.style.display = 'none';

x.style.visibility = 'hidden'

}

else

{

alert(a);

}

CSS

.readingContent{

display: none;

visibility: hidden;

}

Report · Jul 09, 2018

I can do it in jQuery, a javascript library, if you can use that, see code below:

<!DOCTYPE html>

<head>

<title>Show Hide Containers</title>

<style>

.hide {

display: none;

}

</style>

crossorigin="anonymous"></script>

$(document).ready(function(){

$('.alertName').css('cursor' , 'pointer').click(function(){

let name = $(this).attr('name');

$('.hide').hide();

$('.' + name).show();

});

</script>

</head>

<body>

<button class="alertName subjectList" name="readingContent">Reading</button>

<button class="alertName subjectListScience" name="scienceContent">Science</button>

<button class="alertName subjectListEnglish" name="englishContent">English</button>

<button class="alertName subjectListHomework" name="homeworkContent">Homework</button>

<button class="alertName subjectListStudySkills" name="skillsContent">Study Skillls</button>

<button class="alertName subjectListSummerCamps" name="campsContent">Summer Camps</button>

</nav>

<h1 class ="Title">Reading Content</h1>

<p class ="Text">Reading Text</p>

</div>

<h1 class ="Title">Math Content</h1>

</div>

<h1 class ="Title">Science Content</h1>

<p class ="Text">Science Text</p>

</div>

<h1 class ="Title">English Content</h1>

<p class ="Text">English Text</p>

</div>

<h1 class ="Title">Homework Content</h1>

<p class ="Text">Homework Text</p>

</div>

<h1 class ="Title">Skills Content</h1>

<p class ="Text">Skills Text</p>

</div>

<h1 class ="Title">Camps Content</h1>

<p class ="Text">Camps Text</p>

</div>

</section>

</body>

</html>

Report · Jul 09, 2018

See jQuery solution above BUT if you do want to do this with vanilla javascript, see code below:

<!DOCTYPE html>

<head>

<title>Show Hide Containers</title>

<style>

.hide {

display: none;

}

</style>

</head>

<body>

<button class="alertName" name="readingContent">Reading</button>

<button class="alertName" name="scienceContent">Science</button>

<button class="alertName" name="englishContent">English</button>

<button class="alertName" name="homeworkContent">Homework</button>

<button class="alertName" name="skillsContent">Study Skillls</button>

<button class="alertName" name="campsContent">Summer Camps</button>

</nav>

<h1 class ="Title">Reading Content</h1>

<p class ="Text">Reading Text</p>

</div>

<h1 class ="Title">Math Content</h1>

</div>

<h1 class ="Title">Science Content</h1>

<p class ="Text">Science Text</p>

</div>

<h1 class ="Title">English Content</h1>

<p class ="Text">English Text</p>

</div>

<h1 class ="Title">Homework Content</h1>

<p class ="Text">Homework Text</p>

</div>

<h1 class ="Title">Skills Content</h1>

<p class ="Text">Skills Text</p>

</div>

<h1 class ="Title">Camps Content</h1>

<p class ="Text">Camps Text</p>

</div>

</section>

</body>

</html>

var alertName = document.getElementsByClassName("alertName");

var myFunction = function() {

var hide = document.getElementsByClassName("hide");

for (var i = 0; i < hide.length; i++) {

hide.style.display = "none";

}

var name = this.getAttribute("name");

var show = document.querySelector('.' + name);

if (show.style.display = "none") {

show.style.display = "block";

}

else {

show.style.display = "none";

}

};

for (var i = 0; i < alertName.length; i++) {

alertName.addEventListener('click', myFunction);

}

</script>

Report · Jul 10, 2018

Thank you Osgood, but why doesnt the reading button work? The code seems to seems to be the same.

Report · Jul 11, 2018

kingpat27 wrote
Thank you Osgood , but why doesnt the reading button work? The code seems to seems to be the same.

Which solution are you using? Can you specify the post number and then someone can check it out for you?

Report · Jul 19, 2018

post number 2

Report · Jul 19, 2018

What about reply #2? That was Osgood's plain JavaScript solution.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 28, 2018

On the first click of the first tab, there was no action. You would have to click on another tab in order to get the first tab to work

Report · Jul 29, 2018

kingpat27 wrote
On the first click of the first tab, there was no action. You would have to click on another tab in order to get the first tab to work

First click of the first tab works ok for me????

Report · Jul 29, 2018

If you are talking about the css only solution then this is an example of what I use -

<!DOCTYPE html>

<html>

<head>

<title>:target demo</title>

<style>

nav {

width: 80rem;

margin-left: 3rem;

}

ul {

width: 80rem;

}

aside {

margin-top: 1rem;

width: 20rem;

height: 5rem;

background: #fff;

box-shadow: inset 2px 2px 10px #888;

border: 2px solid #473C35;

border-radius: 10px;

padding: 2rem;

float: right;

}

article[id*=tab] {

width: 47rem;

height: 5rem;

padding: 2rem;

margin: 1rem 1rem 0 3rem;

background: #fff;

box-shadow: inset 2px 2px 10px #888;

border: 2px solid #473C35;

border-radius: 10px;

position: absolute;

left: 0em;

opacity: 0;

-webkit-transition: 1s all;

-moz-transition: 1s all;

-ms-transition: 1s all;

-o-transition: 1s all;

transition: 1s all;

}

li {

display: inline;

}

li a {

background-color: #9C968B;

border: 1px solid #473C35;

border-radius: 5px;

display: inline-block;

width: 16rem;

text-align: center;

list-style: none;

text-decoration: none;

}

article[id*=tab]:target {

opacity: 1;

z-index: 5;

}

</style>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

<h2>Page 1: This is the first page in the :target example</h2>

</article>

</article>

</div>

</body>

</html>

Report · Jul 09, 2018

You are missing the closing bracket on your first if statement

<script>
     function alertName(a){
          if(a.id == 'Reading'){
               var x = document.getElementsByClassName('readingContent');
               if (x.style.display === "none"){
                    x.style.display = 'block';
                    x.style.visibility = 'visible';
               } else {
                    x.style.display = 'none';
                    x.style.visibility = 'hidden'
               };
          } else {
               alert(a);
          }; // you are missing this closing bracket
     }
</script>

Report · Jul 09, 2018

TheBCMan  wrote
You are missing the closing bracket on your first if statement
<script>      function alertName(a){           if(a.id == 'Reading'){                var x = document.getElementsByClassName('readingContent');                if (x.style.display === "none"){                     x.style.display = 'block';                     x.style.visibility = 'visible';                } else {                     x.style.display = 'none';                     x.style.visibility = 'hidden'                };           } else {                alert(a);           }; // you are missing this closing bracket      } </script>

That's really not an efficient way of doing what needs to be achieved because you are requesting each 'id' individually.....so end up with more code than is strictly required.

Using a class name and looping through the code, attaching an event listener is a more economical approach.

Report · Jul 09, 2018

@osgood_ : Of course it's not the best way to do it, but read his question, he wants to know / learn what is wrong, not someone show him how to do it I could have rewritten the code in 2-3 lines of jQuery with the toggle function but I choose to answer his question

Report · Jul 10, 2018

TheBCMan wrote
@osgood_ : Of course it's not the best way to do it, but read his question, he wants to know / learn what is wrong, not someone show him how to do it I could have rewritten the code in 2-3 lines of jQuery with the toggle function but I choose to answer his question

By showing someone a better way to do something they eventually DO learn by observing the code. I understand for someone just starting out its far easier to produce 'isolated' event listeners but you end up with more code to manage, each time you add a nav item you need to add another event listener and another and another etc.

When I started out I too was using the same long-winded methods (still do sometimes because I don't know any better) but I looked and saw what others, who were more skilled than I was at the time were doing, and explored their code.

So I disagree with you - if a method can be improved then it should be explained or some example code should be provided to analyse.

If I come on here and post poor code and it could be improved - I would hope someone with more experience would provide a better option.......I need to learn too and am happy to do so because I want to improve my skills and abilities......but alas where there was once a handful of contributors in the forum that had any coding experience there is virtually now none, to actually learn anything from or discuss anything related to code with.

Please accept my apologise for actually trying to improve someones skills/abilities to do something

Report · Jul 10, 2018

TheBCMan wrote
@osgood_ : Of course it's not the best way to do it, but read his question, he wants to know / learn what is wrong, not someone show him how to do it I could have rewritten the code in 2-3 lines of jQuery with the toggle function but I choose to answer his question

The problem with this forum, is that we have to work out if the poster just wants their question answered, or if they wish to know not just how to do do something using what they have posted, but alternate methods.

At the same time this post was being answered, another post was asking why a Dw behaviour was crashing Dw, and the poster marked their answer correct which was an alternative way to do what they wished, not an answer though that fixed the problem.

Most of us could have given a better method of doing what that poster wanted than using Dw js behaviours, but that was I thought not what the user was asking. In this post however, the user asked how to do a show/hide behaviour, (using js). That left the possible answers open to each individual replying, some choosing js/jQuery and myself suggesting that html/css alone could be used if the poster was interested. As the poster did not reply to my post(s) I did not post my solution.

Web development is no longer restricted to only using js to do such things as show/hide content, and that applies to many things that where once the domain of having to use js. For this forum, we try to take into account that many poster may not know what html/css and even js is capable of now, and suggesting alternative methods has become part of answering users questions.

Report · Jul 10, 2018

You are literally blasting me for answering his question of "could someone please tell me what I am doing wrong" ... using his code?

Report · Jul 10, 2018

TheBCMan wrote
You are literally blasting me for answering his question of "could someone please tell me what I am doing wrong" ... using his code?

Not blasting you at all, youre just being a bit short-sighted in my opinion not to advise of better methods - like I said if I posted bad ways I'd really want someone to help me improve my bad way.........obviously you're more than happy for someone to continue their bad habits. Maybe you just overlooked the OP had several buttons, not just the one button.

Report · Jul 10, 2018

I dunno, I'm here to help and not just technically answer questions clearly. I'm from the book of hello world examples and helping people with their own learning path rather than doing their homework for them. Each of their own I guess

Report · Jul 10, 2018

I am not blasting you for answering his problem, (in fact I would welcome more people joining in with answers on this forum).

What I am doing, is trying to point out that there are pure html and css methods to do many thing that posters are still doing with javascript/jQuery, and as many, many Dw users, (including acp's) do not know of the html/css methods, posting that it is possible, (if the poster is interested) should also be part of the possible answers.

Report · Jul 10, 2018

pziecina wrote
I am not blasting you for answering his problem, (in fact I would welcome more people joining in with answers on this forum).
What I am doing, is trying to point out that there are pure html and css methods to do many thing that posters are still doing with javascript/jQuery, and as many, many Dw users, (including acp's) do not know of the html/css methods, posting that it is possible, (if the poster is interested) should also be part of the possible answers.

I still think the issue with pure html/css methods is the subtle effects one might need to introduce.......it takes much more code and time to do something say jQuery can do out of the box - fadeIn, fadeOut, slideToggle etc. Yes we have to consider the overheads too but I guess the majority consider 90k acceptable.

I now try to produce the same solution in vanilla js because I'm obviously concerned about the bad press jQuery courts these days but having done a lot of investigation into vue over the past couple of weeks that seems fine for perhaps more complex apps/solutions but if like me most of your requirements are a few drop-menus, a few fadeIn, fadeOut effect etc I dont think you can really beat using jQuery........yeah the pro toffs will say you don't need it which is very true but then in some instances you will be writing more code to do what jQuery does in less. Obviously in the ideal world there would only be one option and you wouldnt get so many varying views.

Also on the subject of these new workflows is it really better to split the code up re-introduce onclick, onchange events etc back into the html code when 10 years ago everyone was trying to eradicate then from the html code.......what goes around comes around....in another 10 years well be back to clean lean and mean html as the new generation of developers will decide that filling the html with all directives and classes actually was a bad idea, only because they want to do something new on their watch.

Report · Jul 10, 2018

I would have to write a lot of css to even come close to the jQuery file size, (which a lot of people tend to forget about).

There is a suggestion regarding browser security to sandbox each individual sites code now. That would mean any external file references, (such as the jQuery source file) only being available to that site if cached, and not to every site referencing the file.

That also brings us to the question of the cache size, which currently stands at between 2Mb and 4Mb, (per site, and there is an unknow total cache size) on mobile devices. So many of the sites produced now are not cached anyway. I know 2Mb may appear excessive to you and me, but when one counts the total image file sizes used by many sites, that 2Mb is quickly exceeded.

Report · Jul 10, 2018

pziecina wrote
TheBCMan wrote
@osgood_ : Of course it's not the best way to do it, but read his question, he wants to know / learn what is wrong, not someone show him how to do it I could have rewritten the code in 2-3 lines of jQuery with the toggle function but I choose to answer his question
The problem with this forum, is that we have to work out if the poster just wants their question answered, or if they wish to know not just how to do do something using what they have posted, but alternate methods.

Well I posted 3 'working' examples of different methods which is more than anyone else did.....so even if it doesnt help this particular OP it might help someone else who may stumble into this forum that has a similar issue and does want to improve their abilities rtaher than use a frame work, plugin etc etc...

Like you said there was another poster asking about 'set text of layer' a very old DW method.....we'll if they had read this thread there would have been 3 options/examples BUT nope chose to consult Fiddle, which is fine, but it just goes to show that no-one is reading the forum any longer these days. I used to go through just about every post back in the day whether it conerned me or not so I could improve my own skills.........sadly these days or maybe just in this forum its blighted by ignorant developers and I use the word developers very lightly.

Maybe I could suggest using tables as an alternative layout method

Report · Jul 14, 2018

pziecina I am very interested in seeing how you would solve my problem with html/css. Please give me your reasoning on why you would do it that way instead of using Javascript.

Report · Jul 14, 2018

Pure CSS & HTML will work for everyone. But a lot of people use script blockers for security reasons. For those people, JS links will not work.

Below is a pure CSS & HTML approach (tested in latest Firefox & Chrome).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show/Hide with CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
/**basic page styles**/
body {
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    font-size: 2.5vw;
    background: #CCC url(https://placeimg.com/500/500/nature) no-repeat center center;
    background-size: cover;
}
.container {
    width: 80%;
    border-radius: 10%;
    margin: 0 auto;
    padding: 2%;
    background: rgba(255,255,255,0.7);
    text-align:center;
}
img {
    max-width: 100%;
    margin: 0 auto;
    vertical-align: baseline;
    display: block
}
/**show/hide with CSS**/
div#tabs p {display:none;}
div#tabs p.tab1:target,
div#tabs p.tab2:target, 
div#tabs p.tab3:target {display:block;}
</style>
</head>
<body>
<div class="container">
<h1>My Awesome Website</h1>
<hr>
<div id='tabs'>
<h2 class="nav-tab-wrapper"> 
<a href="#tab1" class="nav-tab tab1">TAB 1</a> | 
<a href="#tab2" class="nav-tab nav-tab-active tab2">TAB 2</a> | 
<a href="#tab3" class="nav-tab tab3">TAB 3</a></h2>
<!--Tab content-->
<p id='tab1' class='tab1'>Tab 1 stuff goes here... <img src="https://placeimg.com/400/300/nature" alt="placholder"> </p>
<p id='tab2' class='tab2'>Tab2 stuff <img src="https://placeimg.com/400/300/arch" alt="placholder"></p>
<p id='tab3' class='tab3'>Tab3 stuff <img src="https://placeimg.com/400/300/animals" alt="placholder"></p>
<!--/tabs--></div>
<!--/container--></div>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 14, 2018

Nancy OShea : Very cool

Adobe Community

Show/Hide Div with JavaScript [or CSS]

1 Correct answer