Display a div depending on the chosen option and conceal the previous div

Question

Display a div depending on the chosen option and conceal the previous div

Is there a way to toggle the visibility of one DIV by clicking on another, while hiding the previously active DIV?

I attempted to use JQuery's slideUp() and slideDown() methods with no success.

Here is the JSFiddle I am currently experimenting with: https://jsfiddle.net/wLayxqq2/

My goal is to display content associated with different colors!

I have come across similar JSFiddles that demonstrate showing and hiding content from individual divs, but none that address hiding content from the previously "active" div!

HTML Code:

<div class="option">Red</div>
<div class="option">Yellow</div>
<div class="option">Green</div>

<div id="red" class="colors"> This is content for red </div>
<div id="yellow" class="colors"> This is content for Yellow </div>
<div id="blue" class="colors"> This is content for Green </div>

CSS Code:

.option{
    display:inline-block;
    border: solid 1px;
    margin:5px;
    padding:5px;
}

javascript jquery html css

Answer 1

Answer №1

Create a unique data-attribute for each div and assign colors to map them accordingly:

<div data-id="red" class="option">Red</div>
<div data-id="yellow" class="option">Yellow</div>
<div data-id="blue" class="option">Green</div>

<div id="red" class="colors"> This is content for red </div>
<div id="yellow" class="colors"> This is content for Yellow </div>
<div id="blue" class="colors"> This is content for Green </div>

Utilize jQuery to toggle visibility based on the selected option:

$(".colors").hide();
$(".option").click(function(){
    $(".colors").hide();
    $("#"+$(this).data("id")).show();
});

Check out the Fiddle!

Answer 2

Create a unique data-attribute for each div and assign colors to map them accordingly:

<div data-id="red" class="option">Red</div>
<div data-id="yellow" class="option">Yellow</div>
<div data-id="blue" class="option">Green</div>

<div id="red" class="colors"> This is content for red </div>
<div id="yellow" class="colors"> This is content for Yellow </div>
<div id="blue" class="colors"> This is content for Green </div>

Utilize jQuery to toggle visibility based on the selected option:

$(".colors").hide();
$(".option").click(function(){
    $(".colors").hide();
    $("#"+$(this).data("id")).show();
});

Check out the Fiddle!

Answer 3

Answer №2

attempt

$(".colors").hide();
$('.option').click(function(){
    $(".colors").hide();
  $("#"+$(this).text().toLowerCase()).show();

});

DEMO

Answer 4

attempt

$(".colors").hide();
$('.option').click(function(){
    $(".colors").hide();
  $("#"+$(this).text().toLowerCase()).show();

});

DEMO

Answer 5

Answer №3

HTML: Red Blue Green

<div id="red" class="colors"> This is content for red </div>
<div id="blue" class="colors"> This is content for Blue </div>
<div id="green" class="colors"> This is content for Green </div>

JS:

$('.option').click(function(){
    $('.colors').hide();
    $('#' + $(this).data('id')).show();
});

Answer 6

HTML: Red Blue Green

<div id="red" class="colors"> This is content for red </div>
<div id="blue" class="colors"> This is content for Blue </div>
<div id="green" class="colors"> This is content for Green </div>

JS:

$('.option').click(function(){
    $('.colors').hide();
    $('#' + $(this).data('id')).show();
});

Answer 7

Answer №4

<div class="choice" data-shade="crimson">Crimson</div>
<div class="choice"  data-shade="gold">Gold</div>
<div class="choice"  data-shade="emerald">Emerald</div>

<div id="crimson" class="shades"> This is content for crimson </div>
<div id="gold" class="shades"> This is content for Gold </div>
<div id="emerald" class="shades"> This is content for Emerald </div>

$(".choice").on("click",function(){
    shade = $(this).data("shade");
    $(".shades").slideUp();
    $("#"+shade).slideDown();
})

https://jsfiddle.net/4q38yo4z/

Answer 8

<div class="choice" data-shade="crimson">Crimson</div>
<div class="choice"  data-shade="gold">Gold</div>
<div class="choice"  data-shade="emerald">Emerald</div>

<div id="crimson" class="shades"> This is content for crimson </div>
<div id="gold" class="shades"> This is content for Gold </div>
<div id="emerald" class="shades"> This is content for Emerald </div>

$(".choice").on("click",function(){
    shade = $(this).data("shade");
    $(".shades").slideUp();
    $("#"+shade).slideDown();
})

https://jsfiddle.net/4q38yo4z/

Answer 9

Answer №5

There appears to be a small error:

<div class="option">Green</div>
...
<div id="blue" class="colors"> This is content for Green </div>

Relying on the name in the DIV tag to display the content could lead to failure.

Instead, consider adding unique identifying information to the divs you wish to click on. jQuery's data() method can help with this.

$(".option").on("click", function(e){
    var id = $(this).data("color");
    $(".colors").hide();  // Hide all content DIVs
    $("#"+id).show();     // Show the target DIV
})

.option{
    display:inline-block;
    border: solid 1px;
    margin:5px;
    padding:5px;
}
.colors {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option" data-color="red">Red</div>
<div class="option" data-color="yellow">Yellow</div>
<div class="option" data-color="green">Green</div>

<div id="red" class="colors"> This is content for red </div>
<div id="yellow" class="colors"> This is content for Yellow </div>
<div id="green" class="colors"> This is content for Green </div>

Check out your revised Fiddle

Answer 10

There appears to be a small error:

<div class="option">Green</div>
...
<div id="blue" class="colors"> This is content for Green </div>

Relying on the name in the DIV tag to display the content could lead to failure.

Instead, consider adding unique identifying information to the divs you wish to click on. jQuery's data() method can help with this.

$(".option").on("click", function(e){
    var id = $(this).data("color");
    $(".colors").hide();  // Hide all content DIVs
    $("#"+id).show();     // Show the target DIV
})

.option{
    display:inline-block;
    border: solid 1px;
    margin:5px;
    padding:5px;
}
.colors {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option" data-color="red">Red</div>
<div class="option" data-color="yellow">Yellow</div>
<div class="option" data-color="green">Green</div>

<div id="red" class="colors"> This is content for red </div>
<div id="yellow" class="colors"> This is content for Yellow </div>
<div id="green" class="colors"> This is content for Green </div>

Display a div depending on the chosen option and conceal the previous div

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Check out your revised Fiddle

Similar questions

Discovering hyperlinks within a text input and converting them into HTML links using AngularJS

Retrieving multiple checkbox values from the front end using AJAX and passing them to

Design and execution of webpage structure

Using ng-mouseover along with ng-if and an animated class causes issues

What is preventing me from obtaining the select and input values?

Having trouble getting my images to load in React. Seems like a common issue that many people run into

How can I design a tooltip window using HTML, jQuery, or other elements to create a box-like effect?

Designing a card flip animation featuring front and back faces without using absolute positioning

Pair of dimensions painting with d3 version 4

Executing a JavaScript function using document.write()

Get access to documents through angular

Receiving an empty response when utilizing Ajax to fetch a token from an external website

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Problem with UL LI styling in Internet Explorer 8

What could be causing the CSS to malfunction when the dropdownlist is updated without refreshing the page?

React Hooks: In useEffect(), unable to modify parent component's state

Modifying the input field's name attribute while utilizing multiple datasets in typeahead.js

Remove the space gap between the header and card in Bootstrap

Focusing on particular jQuery elements that share the same class names

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page