Create a javascript function to hide elements?

Question

On a click event, the page loads the game board and several elements are hidden / shown.

Instead of having this giant thing mixed in the function:

$('.playervscomputer').css('display', 'block');
$('.player_vs_cpu_board').css('display', 'block');
$('.player_vs_computer_color_selection').css('display', 'block');
$('.player_vs_computer_start_button').css('display', 'block');
$('.header').css('display', 'block');
$('.hide_answer').css('display', 'block');
$('.intro').remove();
$('.player_board_header').css('display', 'inline');
$('.intro').css('padding-top', 'none');
$('#show_after_starting').css('display', 'inline');
$('#mastermind_table_ten_cpu').css('background-color', 'yellow')

Does anyone know if it's possible to wrap this up in its own function and just call the function when the click event occurs? I tried this, but it was unsuccessful (I'm assuming I did this wrong...)

Thanks

Whats stopping you from writing this in a function? Or is it re-use you are trying to achieve? Whats the specific use-case? — deostroll
– deostroll, Commented Apr 26, 2014 at 4:32
What do you want to do? Hide couple of elements and show some others? — scripter
– scripter, Commented Apr 26, 2014 at 4:34
Thanks guys. Deepsty's solution was what I was looking for. Appreciate the help everyone. — user3007294
– user3007294, Commented Apr 26, 2014 at 4:47

Deepsy · Accepted Answer · 2014-04-26 04:38:17Z

3

Just list them with commas like this:

$('.playervscomputer, .player_vs_cpu_board, .player_vs_computer_color_selection, .player_vs_computer_start_button, .header, .hide_answer').css('display', 'block');
$('.intro').remove();
$('.player_board_header, #show_after_starting').css('display', 'inline');
$('.intro').css('padding-top', 'none');
$('#mastermind_table_ten_cpu').css('background-color', 'yellow')

EDIT: Although in my opinion the best approach will be if u make a css class like this:

.dblock .playervscomputer,.dblock .player_vs_cpu_board, .dblock .player_vs_computer_color_selection, .dblock .player_vs_computer_start_button, .dblock .header, .dblock .hide_answer 
{
 display: block;
}

and just do $("parent-selector").addClass("dblock") to the parent element of all these boxes. This will be the fastest and cleanest approach. Also jQuery queries are expensive. Don't overuse them.

edited Apr 26, 2014 at 4:38

answered Apr 26, 2014 at 4:32

Deepsy

3,8108 gold badges43 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deepsy Over a year ago

@user3007294 I edited my post and added a CSS solution.

user3007294 Over a year ago

Awesome, thanks again. I agree the css class looks a bit cleaner (both look much better than what I had).

sshet · Accepted Answer · 2014-04-26 04:35:20Z

0

Well you can chain things like ,And call this function on ready

function init() {
    $('.playervscomputer , .player_vs_cpu_board').css('display', 'block');

} 

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

});

answered Apr 26, 2014 at 4:35

sshet

1,1541 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Create a javascript function to hide elements?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related