Highlighted

Show/Hide Div with JavaScript [or CSS]

Community Beginner ,
Jul 08, 2018

Copy link to clipboard

Copied

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;

}

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Code, How to

Views

6.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Show/Hide Div with JavaScript [or CSS]

Community Beginner ,
Jul 08, 2018

Copy link to clipboard

Copied

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;

}

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Code, How to

Views

6.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 08, 2018 0
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Show Hide Containers</title>

<style>

.hide {

display: none;

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

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

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

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

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

});

});

</script>

</head>

<body>

<nav class ="subjectBar">

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

<button  class="alertName subjectListMath" name="mathContent">Math</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>

<section class="hidingsection">

<div class="hide readingContent">

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

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

</div>

<div class="hide mathContent">

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

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

</div>

<div class="hide scienceContent">

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

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

</div>

<div class="hide englishContent">

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

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

</div>

<div class="hide homeworkContent">

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

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

</div>

<div class="hide skillsContent">

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

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

</div>

<div class="hide campsContent">

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

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

</div>

</section>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 1
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Show Hide Containers</title>

<style>

.hide {

display: none;

}

</style>

</head>

<body>

<nav class ="subjectBar">

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

<button  class="alertName" name="mathContent">Math</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>

<section class="hidingsection">

<div class="hide readingContent">

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

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

</div>

<div class="hide mathContent">

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

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

</div>

<div class="hide scienceContent">

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

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

</div>

<div class="hide englishContent">

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

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

</div>

<div class="hide homeworkContent">

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

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

</div>

<div class="hide skillsContent">

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

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

</div>

<div class="hide campsContent">

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

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

</div>

</section>

</body>

</html>

<script>

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 2
Community Beginner ,
Jul 10, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
LEGEND ,
Jul 11, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 11, 2018 0
Community Beginner ,
Jul 19, 2018

Copy link to clipboard

Copied

post number 2

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2018 0
Adobe Community Professional ,
Jul 19, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2018 0
Community Beginner ,
Jul 28, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2018 0
LEGEND ,
Jul 29, 2018

Copy link to clipboard

Copied

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????

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2018 0
pziecina LATEST
LEGEND ,
Jul 29, 2018

Copy link to clipboard

Copied

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

    <li><a href="#tab1" tabindex="1">Page 1</a></li>

    <li><a href="#tab2" tabindex="2">Page 2</a></li>

  </ul>

</nav>

<div id="wrapper">

  <article id="tab1">

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

  </article>

  <article id="tab2">

    <h2>Page 2: This is the 2nd page</h2>

  </article>

</div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2018 0
Guide ,
Jul 09, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 2
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 0
Guide ,
Jul 09, 2018

Copy link to clipboard

Copied

@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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 2
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 1
Guide ,
Jul 10, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 1
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
Guide ,
Jul 10, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 1
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 1
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
Community Beginner ,
Jul 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2018 0
Adobe Community Professional ,
Jul 14, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2018 2
Guide ,
Jul 14, 2018

Copy link to clipboard

Copied

Nancy OShea​ : Very cool

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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;

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
Adobe Community Professional ,
Jul 15, 2018

Copy link to clipboard

Copied

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'.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 1
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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>.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
LEGEND ,
Jul 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2018 0
Community Beginner ,
Jul 10, 2018

Copy link to clipboard

Copied

@TheBCMan I am still not having the issue run.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
Guide ,
Jul 10, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 0
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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.....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 0
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 0
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 1
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 0
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 1
LEGEND ,
Jul 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 0
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
Adobe Community Professional ,
Jul 09, 2018

Copy link to clipboard

Copied

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/

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2018 0
Guide ,
Jul 10, 2018

Copy link to clipboard

Copied

Ok going the other way... an "optimized" take on the question. Running example: Edit fiddle - JSFiddle

JavaScript:

init=function(){

     $('[buttonlist] button').click(function(){                              // bind to button clicks

          var pressed = $(this).html().toLowerCase().replace(/\s/g, '');     // what was pressed?

          $( '.readingContent div' ).hide();                                 // hide all elements again

          $( '.readingContent, div[data=' + pressed + ']' ).show();          // show the main element (again) and the element pressed

     })

};

$(document).ready(function(){ init(); });

CSS:

.readingContent, .readingContent div{                         /* hide all entire block and the elements initially */

     display: none;

}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<section class="fullLength">

     <nav class="subjectBar">

          <ul buttonlist>

               <button>Reading</button>

               <button>Math</button>

               <button>Science</button>

               <button>English</button>

               <button>Homework</button>

               <button>Study Skills</button>

               <button>Summer Camps</button>

          </ul>

     </nav>

</section>

<section class="readingContent">

     <div data="reading">

          <h1>Reading</h1>

          <p></p>

     </div>

     <div data="math">

          <h1>Math</h1>

          <p></p>

     </div>

     <div data="science">

          <h1>Science</h1>

          <p></p>

     </div>

     <div data="english">

          <h1>English</h1>

          <p></p>

     </div>

     <div data="homework">

          <h1>Homework</h1>

          <p></p>

     </div>

     <div data="studyskills">

          <h1>Study Skills</h1>

          <p></p>

     </div>

     <div data="summercamps">

          <h1>Summer Camps</h1>

          <p></p>

     </div>

</section>

You don't need to complicate HTML code with classes, just use attributes and child html elements to refer to them. You can bind JavaScript events the same was CSS is applied to large sections of code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 3
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

Thanks for posting your version. The more code contributions, which show optional ways of acheiving the same result, the better. We can all learn and expand our knowledge.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
Adobe Community Professional ,
Jul 10, 2018

Copy link to clipboard

Copied

Perhaps a bit too much information for the OP .

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 1
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

Perhaps a bit too much information for the OP .

We'll OP can certainly take their pick of the bunch and just maybe learn something in the process.

I might add if someone 'liked' the designated correct answer then they know nothing about coding.............but they do use Wappler, pretty damning I'd say.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

Perhaps a bit too much information for the OP .

The OP had probably left after the first 2-3 posts, or solved the problem themselves shortly after posting.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 0
LEGEND ,
Jul 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

https://forums.adobe.com/people/Nancy+OShea   wrote

Perhaps a bit too much information for the OP .

The OP had probably left after the first 2-3 posts, or solved the problem themselves shortly after posting.

Yeah, that's another aspect of this forum - how many times does someone post and never return to confirm they have found an answer or that someone has posted an answer that has solved their issue, thanks bro........still I guess the information is available should there be anyone else facing the same issue, so time has not been completely wasted in my view........keep posting away......it may help someone, somewhere, some place, some time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2018 1