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;

}

[TheBCMan]

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.

[osgood_]

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.

[Nancy OShea]

Perhaps a bit too much information for the OP .

[osgood_]

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.

[pziecina]

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.

[osgood_]

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.