progNewbie progNewbie - 7 months ago 18
HTML Question

Toggle elements view on buttons click

I have different divs which all have the same class "textBox".

At the same time there should always just be one box displayed. For most Boxes there is a button on the bottom of my page which can be clicked and triggers
to make the box visible and hide the box which is already shown at this moment.

Edit: Fiddle https://jsfiddle.net/8uvsq7ta/

For this I have this JS-code:

$( "#gettingStartedButton" ).click( function () {

if (! $( "#gettingStarted" ).is( ":visible" ) ) {
if ( $( "#extension" ).is( ":visible" ) ) {
$( "#extension" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#executingBox" ).is( ":visible" ) ) {
$( "#executingBox" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#feedback" ).is( ":visible" ) ) {
$( "#feedback" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#impressum" ).is( ":visible" ) ) {
$( "#impressum" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#registration" ).is( ":visible" ) ) {
$( "#registration" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
}
else {
$( "#gettingStarted" ).fadeOut( function () {
$( "#executingBox" ).fadeIn();
});
}
});


The div boxes look like this:

<div id="gettingStarted" class="textBox">
test blabla
</div>

<div id="feedback" class="textBox">
test blabla
</div>

<div id="registration" class="textBox">
test blabla
</div>

<div id="impressum" class="textBox">
test blabla
</div>


CSS:

.textBox {
diplay: none;
}


This Code checks if the box is already shown and if yes it checks EVERY OTHER BOX to get the one which is visible and then fade it out to afterwards fade the reffered box in.

My problem is, I need this part of code for every box. I think there should be a better way to accomplish this.

What I am searching is kind a method openBox(id) where I give the id of the box as paramete and it automatically detects all other boxes with the class parameter and detects which is already faded in, then fades this out to fade the box with the id in.

Sadly my javascript skills aren't that good, so I seek to find some advices or examples how to achieve this.

Thank you very much for every input you can give me.

Answer

var $textBox = $(".textBox");               // get 'em all!
$textBox.eq(0).fadeIn();                    // FadeIn first one

$("[data-showid]").on("click", function(){  // Buttons click (Use data-* attribute!) 
  var $box = $("#"+ this.dataset.showid);   // Get the target box ID element
  $textBox.not($box).hide();                // Hide all bot targeted one
  $box.stop().fadeToggle();                 // FadeToggle target box
});
.textBox{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="gettingStarted" class="textBox">getting started blabla</div>
<div id="feedback" class="textBox">feedback blabla</div>
<div id="impressum" class="textBox">impressum blabla</div>

<button data-showid="gettingStarted">GS</button>
<button data-showid="feedback">FB</button>
<button data-showid="impressum">Imp</button>


If you don't want the current box to toggle, than instead of .fadeToggle() use .fadeIn().

http://api.jquery.com/fadetoggle/
https://api.jquery.com/data/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Comments