Show/Hide Div with JavaScript [or CSS]

[kingpat27]

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

<section class="fullLength">

    <nav class ="subjectBar">

  <ul>

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

  <button onclick="alertName(this)" class="subjectListMath" id="Math">Math</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>

<section class="hidingsection">

  <div class = "readingContent">

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

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

  </div>

  <div id = "mathContent">

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

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

  </div>

  <div id = "scienceContent">

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

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

  </div>

  <div id = "englishContent">

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

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

  </div>

  <div id = "homeworkContent">

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

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

  </div>

  <div id = "skillsContent">

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

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

  </div>

  <div id = "campsContent">

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

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

  </div>

  </section>

JAVASCRIPT

<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);

  }

CSS

.readingContent{

    display: none;

  visibility: hidden;

}

[osgood_]

Add a bit of subtle css animation (see below) and you have yourself a javascript-less solution. Whether or not you use a javascript-less solution really depends on how simple your overall requirement are going to be. If your website has no need for anything too complex I can't see why not but css/html alone is quite restrictive in what it can do and these days I don't know many if any website which doesnt use javascript or a javascript framework - angular, react, vue, jquery, amongst a few of the most commonly found (javascript and javascript frameworks are somewhat huge these days for cerating apps, both small and large) so if one is available you may as well take advantage of it.

div#tabs p.tab1:target,  div#tabs p.tab2:target,   div#tabs p.tab3:target {

display:block;

animation: fadein 2s;

}

@keyframes fadein {

from {

opacity:0;

}

to {

opacity:1;

}

}

[pziecina]

osgood_  wrote

I can't see why not but css/html alone is quite restrictive in what it can do and these days I don't know many if any website which doesnt use javascript or a javascript framework - angular, react, vue, jquery, amongst a few of the most commonly found (javascript and javascript frameworks are somewhat huge these days for cerating apps, both small and large) so if one is available you may as well take advantage of it.

The use of javascript and frameworks being commonly used for everything, is only based on what users can see in use with the avarage (small?) site. I have found no basis for the myth when it comes to large corporate browser based applications, in fact the opposite tends to apply, where reliance on open source or large frameworks has declined in favour of a modular custom approach.

[osgood_]

pziecina  wrote

The use of javascript and frameworks being commonly used for everything, is only based on what users can see in use with the avarage (small?) site. I have found no basis for the myth when it comes to large corporate browser based applications, in fact the opposite tends to apply, where reliance on open source or large frameworks has declined in favour of a modular custom approach.

In the bigger picture these are few and far between, even facebook and twitter use js frameworks.

Most clients (the majority) do not have huge budgets so bespoke solutions are not an option. Im not so sure I'd persoanlly start of saying I can do all I need to do with css and html alone......you'll probably soon run into an issue which it cannot solve alone, even on a small site.

It also makes me smile a bit when someone posts about javascript not being available........in that case the small amount of users with js disabled are going to have a very nice experience......today is not yesterday.

[BenPleysier]

I find it a strange argument to have, JavaScript, along with HTML and CSS is native to the browser, why shouldn't we make use of it?

How many of us have used

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

or one of the frameworks that osgood_ has mentioned?

Yes, I know that security risks have been mentioned and because JS is interpreted on the client, it is the user that will be duped when there are security holes in the site. For more info, have a look at https://wpengine.com.au/resources/javascript-security/

We as developers are required to take reasonable steps to ensure that the scripts will not pose a security risk. Secure Sockets Layers and .htaccess entries can be of assistance to this end.

As a user, it is most important to have a program that sniffs each site that we visit. If I have a look at what my Online Security says about this site

all is well.

As for the users that have switched JS off, they are missing out because of old wives' tales.

Edit: turning JavaScript off is like 'no eating in case i get food poisoning'.

[osgood_]

BenPleysier  wrote

I find it a strange argument to have, JavaScript, along with HTML and CSS is native to the browser, why shouldn't we make use of it?

I don't mind but I think one needs a clear mind set, either one is in favour of a certain workflow or one is not, its all opinionated and most of these opinions, including mine, are just based on personal preferences, nothing really logical other than hey I use this because its trendy or I use this because it makes me feel superior. I've come to the concludion of late that you need to just use the workflow you are comfortable in using....most of the waffle like its slow or its bloated is really irrelevant until you start talking big production websites. Unfortunately a lot of 'ignorant' developers think they are producing linkedin or snapchat when they are producing nothing more that your average website where build files and high end js frameworks like angular/react are really out of place and complicate the procedure.

The only critera that I think every good developer should try to acquire is a good basic knowledge of html, css, javascript and maybe a server language.........then if they want to use a framework, based on their bad experiences of using a vanilla version of a language, then why not. My objection is if someone jumps straight into a framework without first acquiring basic coding knowledge to make a judgement as to if what they are using makes it easier or infact makes it harder.

I was guilty of that using jQuery before I got a better handle on vanilla javascript. I now have a much better understanding of vanilla javascript and based on that I still prefer jQuery. I dont particularly like any code methods where writing the vanilla version means the code is a few lines longer and you have to combine other languages, usually something like css keyframes to make events happen smoothly.....yes you need to take into account the 'bloated' library itself but most who visit your website will probably have a cached version of a CDN link these days, as frameworks are so popular.

If I was just writing a basic no frills calculator app or wanted to alert a few messages then Id go with vanilla javascript BUT its rare these days that I dont use fade effects, slide effects or ajax data processing (jQuery accomplishes these with ease) whereas vanilla javascript still requires more thought and extra work.........so I might as well write the calculator app in jQuery as well.

Im currently exploring vue to see if it can replace jQuery in most instances but even if it can I would only be being a code snob if I said Vue is much better than jQuery. The key is if youre working on a big budget complex project then Angular/React and to a certain extent Vue may well be your better option but if youre working on fairly low budget website, which accounts for the majority of websites,  then jQuery may well still be your best option for years to come............I have not really reached a conculsive verdict as yet.

[pziecina]

BenPleysier  wrote

As for the users that have switched JS off, they are missing out because of old wives' tales.

Edit: turning JavaScript off is like 'no eating in case i get food poisoning'.

Who has mentioned turning javascript off, or not using javascript or a framework at all?

All I pointed out is that there is now a growing number of developers using a modular approach when it comes to frameworks of any type. Even some of the common frameworks now offer custom builds in which the developer chooses the support and/or the components they require to be included. Maybe a custom build is not 100% modular, but it is better than the 'throw everything in, including the kitchen sink' approach that we see many advocating and using now in web design/development.

[pziecina]

I would also like to mention that even the creation and use of custom builds of librarys and frameworks requires the developer to know what they are doing. Which maybe part of the problem, as many people calling themselves web designers/developers do not know enough to do more than point/click or copy/paste.

[osgood_]

pziecina  wrote

BenPleysier   wrote

As for the users that have switched JS off, they are missing out because of old wives' tales.

Edit: turning JavaScript off is like 'no eating in case i get food poisoning'.

Who has mentioned turning javascript off, or not using javascript or a framework at all?

I think Nancy kind of suggested it might not be a good idea to use javascript because using pure css/html everyone would benefit, which is true BUT how many users do have javascript disabled these days and and who cares anyway.........pretty much everything out their uses some kind of javascript so their experience must be normal or pretty bad.

Its like saying we must cater for those still using IE7....maybe a few will/do but most dont, things move on.

EDITED:

Actually script blockers were mentioned but if you're blocking scripts then its likely that you're going to block something that is integral to the working of the site. <shrug>.

[pziecina]

osgood_  wrote

I think Nancy kind of suggested it might not be a good idea to use javascript because using pure css/html everyone would benefit, which is true BUT how many users do have javascript disabled these days and and who cares anyway.........pretty much everything out their uses some kind of javascript so their experience must be normal or pretty bad.

If someone can do what they want using just html and css, (or just html) I don't think it is such a bad thing. I know many, if not most sites are not developed with accessibility in mind now, but css will still work for most assistive devices, (screen readers or even the browsers 'reader view') whilst many do not fully support javascript, and most assistive devices even recommend turning js off for some types of disabilities, often as a precation though, mainly against those developers who still insist that flashing images/colours grab the users attention better.

[osgood_]

pziecina  wrote

If someone can do what they want using just html and css, (or just html) I don't think it is such a bad thing.

Not bad at all..........Im just wondering how far they will get without having to involve some kind of dynamic requirement, which css/html alone is quite limited in providing. I guess we have things like the html5 'required' tag now etc for form validation but its not exactly pretty, just gets the basic job done....so if you just want to get the job done I guess css/html gets you a lot further than it used to.

I guess you can produce some kind of dynamic image gallery modal and slideshow with just html/css alone, I dont know never investiagted it and a drop menu onclick....so for most websites you can probably achieve what its required. But as far as I know css isnt much good at getting values and doing maths etc? You'd know more than me because your ethos is based around avoiding stuff like js if it can be done with css/html

[pziecina]

What always gets me when I do something using just html and css, (show/hide, lightbox, carousel, etc)is that when I look at how to improve them, I always start by looking at javascript solutions first, and only then try to think of css solutions.

Habit, I suppose!

Maths is easy in css, css calc(), and as for variables I don't want to start that disagreement again.

The problem with css, is that unlike js or even css processors, the specs take time to produce and even longer for usable browser support to be implemented.

[osgood_]

How would you get the value of a form input field using just css/html and do the javascript calculation in css equivalent to as below?

<input type="text" name="quantiy" class="quantity">

<div class="total"></div>

let total = document.querySelector('.total');

let quantity = document.querySelector('.quantity').value;

let cost = 10;

let total = quantity * cost;

total.innerHTML = total

Is that possible???

[pziecina]

Is it possible, yes and no .

You would use the css calc() function, then save the user inputed variables to a css variable. The problem with that is as you have probably noticed - you require js to save the variable values to a cookie in order to be able to then retrieve them for use in the css calc function.

So as you will agree, why bother if you have to use js anyway.

I suppose in theory one may be able to use the built-in form validation routines, but I have never tried it, and for the little js required, again why bother. It is only worth doing something with just html and css when one has an advantage in doing so, (faster, easier) or there is a good reason to do so, (accessibility, code optimisation) such as allowing the user full control over customising the ui.

Try full customisation using js and/or a css processor, (moving ui elements, font type/size, color). I only require css variables for the position of the ui elements, and one each for font size/type/color and color of ui components, and with the ability to save the custom css to the browser, (no js or server code) the user ui preferences are set until the user themselves clears it, (in practice one would also save a copy to the users account also).

[pziecina]

Nice to see you also came up with the same solution as me Nancy .

To the OP -

It is also possible using the checkbox hack, but Nancys posted solution is the one I would recommend.

It is also worth noting that if anyone is not worried about IE support, that the html5 detail/summary element can be used, which requires no javascript or css, (except for styling) -

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

[kingpat27]

@TheBCMan I am still not having the issue run.

[TheBCMan]

kingpat27​ : What are you trying to achieve functionality wise? I assumed that when you pressed the labelled button the content showed, it is an easy mod of my second example if that is not correct.

[WolfShade]

If you use something like Bootstrap, you can do this without JavaScript.

V/r,

^ _ ^

[osgood_]

Bootstrap uses javascript, the jQuery library - you could use one of the default options which ships with it to show an element but nothing like rolling your own if you want to grasp how the code functions really work, rather than stumbling along  using a front end framework and not understanding what is happening and why, that just leads you to not really wanting to explore beyond a very small world.

If you ever need to write some besoke app or solution, which a good deal of websites are starting to deploy, Bootstrap isnt going to help you much, it could infact be working against you, isolating you to a small selection of options and no incentive to wander beyond what it offers.......until.....

[pziecina]

If you are using flexbox, you could also just use 'visibility: collapse;' which was included as part of the flexbox specs -

see section 4.4 in https://www.w3.org/TR/2017/CR-css-flexbox-1-20171019/

[osgood_]

pziecina  wrote

If you are using flexbox, you could also just use 'visibility: collapse;' which was included as part of the flexbox specs -

see section 4.4 in https://www.w3.org/TR/2017/CR-css-flexbox-1-20171019/

Or if you want to jump on the band-wagon and be  a 'trendy' developer vue.js, example below: (Really - too many options)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Vue Tabs</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>

</head>

<body>

<div class="show_content">

<button v-for="(navlink, index) in navlinks" v-on:click="activeContent = index">{{navlink}}</button>

<div v-show="activeContent === 0">

<h2>Reading</h2>

<p>Reading content goes here</p>

</div>

<!-- end reading -->

<div v-show="activeContent === 1">

<h2>Maths</h2>

<p>Maths content goes here</p>

</div>

<!-- end maths -->

<div v-show="activeContent === 2">

<h2>Science</h2>

<p>Science content goes here</p>

</div>

<!-- end science -->

<div v-show="activeContent === 3">

<h2>English</h2>

<p>English content goes here</p>

</div>

<!-- end science -->

<div v-show="activeContent === 4">

<h2>Homework</h2>

<p>Homework content goes here</p>

</div>

<!-- end homework -->

<div v-show="activeContent === 5">

<h2>Study Skills</h2>

<p>Study Skills content goes here</p>

</div>

<!-- end study skills -->

<div v-show="activeContent === 6">

<h2>Summer Camps</h2>

<p>Summer Camps content goes here</p>

</div>

<!-- end summer camps -->

</div>

<!-- end show_content -->

<script>

new Vue({

el:'.show_content',

data:{

activeContent: 0,

navlinks: ['Reading' , 'Math' , 'Science', 'English', 'Homework', 'Study Skills', 'Summer Camps']

}

});

</script>

</body>

</html>

[pziecina]

osgood_  wrote

Or if you want to jump on the band-wagon and be  a 'trendy' developer vue.js, example below: (Really - too many options)

You really do not like all these different options then?

O/K, I won't mention the html5 detail/summary elements.

[osgood_]

pziecina  wrote

osgood_   wrote

Or if you want to jump on the band-wagon and be  a 'trendy' developer vue.js, example below: (Really - too many options)

You really do not like all these different options then?

No, not really, no-one ever agrees which is the best approach to take. The less options the better because at least you know you're going in the right direction.

[pziecina]

The reason i think we have ended up with so many ways of doing the same thing, is because if a couple of html elements or a css selector, (the op could use the css target attribute) can do the job, a lot of people would be unable to justify their existence, or salary. After all if they cannot make it look difficult, then anyone could do it.

[osgood_]

pziecina  wrote

After all if they cannot make it look difficult, then anyone could do it.

Possibliy part of the problem, another aspect of trying to complicate a simple procedure is to lessen the possiblility that the website falls into the hands of someone with less experience who can charge less for maintaining it. In past days where much was just plain old html/css plus a bit of server side code we now have stuff like angular, vue and react, phython, etc - code instead of being isolated into one file is now spread all over the place.

I've recently been observing a bunch of websites which have been exclusively produced using vue.js or most parts have been. It seems to be a growing enterprise and I must admit I have zero idea of what's happening because if you look at the source code there's almost nothing there to see, its all being inserted by js files, bits from this file, bits from that file...........so complexity may be as aresult not of only trying to justify the big wage packet but also as a 'security' measure which keeps the client locked into the provider.....or at least make it doubly difficult to find an optional provider who would understand how the wesbite works..........you know little johnny who uses Wordpress or Wix is hardly likely to be the threat he once was.

[Nancy OShea]

Is this a learning exercise or a real project?

I ask because you can easily toggle content with Bootstrap classes and a data-target.

https://getbootstrap.com/docs/4.0/components/collapse/