Simplifying the process of implementing Jquery CSS Toggles

Question

Simplifying the process of implementing Jquery CSS Toggles

I am planning to simplify the process of toggling visibility for 12 different divs when clicking on 12 different buttons. Instead of repeating the same code multiple times, I am considering a more efficient approach.

My idea is to:

Step A) Initially hide all divs

Step B) Use a switch statement to compare with the clicked element and show the corresponding DIV as inline-block

Do you think this would be a good solution?

Please find my current progress on this CodePen link here.

Thanks in advance,

EDIT: I am currently encountering an "unexpected identifier" error on each case statement. Here is the updated code snippet:

$(".klik").click(function(){

    $("#oppehoejre").children().css("display","none"); 
    $("#nedrevenstre").children().css("display","none");

    var emne = $(this).attr('id');

    alert(emne);

    switch (emne) {             

        Case 'klik_multimedia':
            $(".multimedia").css("display","inline-block");
            break;

        Case 'klik_student':
            $(".sprogligstudent").css("display","inline-block");
            break;                      

        Case 'klik_datamatiker':
            $(".datamatiker").css("display","inline-block");                    
            break;                      

        Case 'klik_itdiplom':
            $(".itdiplom").css("display","inline-block");                   
            break;                      
        
        default:
            $(".multimedia").css("display","inline-block");
            break;                      

    };

});

jquery html css switch-statement toggle

Answer 1

Answer №1

After reviewing your inquiry, I believe this solution aligns with what you are seeking. Feel free to check out the code snippet on this fiddle link.

$(document).ready(function() {
  $("button").click(function() {
    var n = $('button').index(this);
    position = n + 1;
    $("div").removeClass("display_me");
    $("div").addClass("display_none");
    $("div:nth-child(" + position + ")").removeClass("display_none");
    $("div:nth-child(" + position + ")").addClass("display_me");
  });
});

div {
  height: 100px;
  width: 100px;
  background: #fff;
  font-size: 20px;
  text-align: center;
}

.display_none {
  display: none;
}

.display_me {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="display_none display_me">1</div>
<div class="display_none">2</div>
<div class="display_none">3</div>
<div class="display_none">4</div>
<div class="display_none">5</div>
<div class="display_none">6</div>
<button>
  Click 1
</button>
<button>
  Click 2
</button>
<button>
  Click 3
</button>
<button>
  Click 4
</button>
<button>
  Click 5
</button>
<button>
  Click 6
</button>

Answer 2

After reviewing your inquiry, I believe this solution aligns with what you are seeking. Feel free to check out the code snippet on this fiddle link.

$(document).ready(function() {
  $("button").click(function() {
    var n = $('button').index(this);
    position = n + 1;
    $("div").removeClass("display_me");
    $("div").addClass("display_none");
    $("div:nth-child(" + position + ")").removeClass("display_none");
    $("div:nth-child(" + position + ")").addClass("display_me");
  });
});

div {
  height: 100px;
  width: 100px;
  background: #fff;
  font-size: 20px;
  text-align: center;
}

.display_none {
  display: none;
}

.display_me {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="display_none display_me">1</div>
<div class="display_none">2</div>
<div class="display_none">3</div>
<div class="display_none">4</div>
<div class="display_none">5</div>
<div class="display_none">6</div>
<button>
  Click 1
</button>
<button>
  Click 2
</button>
<button>
  Click 3
</button>
<button>
  Click 4
</button>
<button>
  Click 5
</button>
<button>
  Click 6
</button>

Answer 3

Answer №2

Are you looking for something like this?

Simplified HTML:

<div id="click_diploma">click_diploma</div>
<div id="click_student">click_student</div>

Using jQuery:

$('#click_student, #click_diploma').on('click', function(){

$(".computer_engineer").css("display","none");
    $(".diploma_holder").css("display","none");               
    $(".multimedia_designer").css("display","inline-block");                 
    $(".language_student").css("display","none");

});

View Example on jsFiddle

Answer 4

Are you looking for something like this?

Simplified HTML:

<div id="click_diploma">click_diploma</div>
<div id="click_student">click_student</div>

Using jQuery:

$('#click_student, #click_diploma').on('click', function(){

$(".computer_engineer").css("display","none");
    $(".diploma_holder").css("display","none");               
    $(".multimedia_designer").css("display","inline-block");                 
    $(".language_student").css("display","none");

});

View Example on jsFiddle

Answer 5

Answer №3

Finally cracked the code!

This new approach makes managing the display of elements so much smoother, eliminating the need to write a .click block for each scenario.

Adding 8 extra cases to the page is now a breeze with minimal additional code required.

$(".klik").click(function(){    // Wait for an element with class .klik to be clicked

    $("#oppehoejre").children().css("display","none"); // Hide all inner frames in oppehoejre
    $("#nedrevenstre").children().css("display","none"); // Hide all inner frames in nedrevenstre 

    var subject = $(this).attr('id');

    // alert(subject); // Used only for debugging purposes

    switch (subject) {             // Switch to display only relevant content

        case 'klik_multimedia':
            $(".multimediedesigner").css("display","inline-block");
            break;
        case 'klik_student':
            $(".sprogligstudent").css("display","inline-block");
            break;                      
        case 'klik_datamatiker':
            $(".datamatiker").css("display","inline-block");                    
            break;                      
        case 'klik_itdiplom':
            $(".itdiplom").css("display","inline-block");                   
            break;                      
        default:
            $(".multimedia").css("display","inline-block");

    };

Answer 6

Finally cracked the code!

This new approach makes managing the display of elements so much smoother, eliminating the need to write a .click block for each scenario.

Adding 8 extra cases to the page is now a breeze with minimal additional code required.

$(".klik").click(function(){    // Wait for an element with class .klik to be clicked

    $("#oppehoejre").children().css("display","none"); // Hide all inner frames in oppehoejre
    $("#nedrevenstre").children().css("display","none"); // Hide all inner frames in nedrevenstre 

    var subject = $(this).attr('id');

    // alert(subject); // Used only for debugging purposes

    switch (subject) {             // Switch to display only relevant content

        case 'klik_multimedia':
            $(".multimediedesigner").css("display","inline-block");
            break;
        case 'klik_student':
            $(".sprogligstudent").css("display","inline-block");
            break;                      
        case 'klik_datamatiker':
            $(".datamatiker").css("display","inline-block");                    
            break;                      
        case 'klik_itdiplom':
            $(".itdiplom").css("display","inline-block");                   
            break;                      
        default:
            $(".multimedia").css("display","inline-block");

    };

Simplifying the process of implementing Jquery CSS Toggles

Answer №1

Answer №2

Answer №3

Similar questions

CSS slideshow with automatic horizontal image transition that seamlessly restarts

Using jQuery, hide any table rows that have a concealed field that matches a specific value

Tips for adjusting font sizes within the same HTML header?

Get the PDF file and access it with Ajax technology

Form validation in AngularJS for controllers with multiple instances

How to create centered striped backgrounds in CSS

iPhone 3GS and 4 not expanding DIVs by 100%

How can I add rows to the tbody of a table that is already inside a div container?

A step-by-step guide on how to display a specified amount of images in the center of

Control the switch for CSS selectors

How come the dropdown menu consistently disrupts my CSS design?

Get the PDF document via FTP by utilizing an XMLHttpRequest and a generic handler

I developed an RPG game with an interactive element using jQuery. One of the biggest challenges I'm facing is the random selection process for determining which hero will be targeted by the enemy bots during battles

What is the best way to extend an image to fill the width of a webpage?

The offset value was inconsistent in the desktop version of Firefox

Centered flex item with a flexbox grid underneath

Adjusting the background color using CSS according to the browser's dimensions

What is the best way to integrate HTML templates into AngularJS?

A particular character is displayed exclusively in a text box using either jQuery or JavaScript

Enhance your iPad's design with a stylish div box-shadow