CODEWITHSUNDEEP
jqueryhtmlonclickhideshow
Hardist
Hardist

Reputation: 1983

jQuery onclick show / hide multiple divs

I am trying to learn some jQuery and appearantly I haven't learned anything from my last questions and the answers I've got, since I cannot figure out how to do the following:

https://jsfiddle.net/9eofcw7w/

Yes, it's working, but code like this is just sloppy and is not professional:

$('#tab1').click(function () {
$('#tab2show').hide();
$('#tab3show').hide();
$('#tab4show').hide();
$('#tab5show').hide();

$('#tab1show').show();
});

How would I go about making the above code with just a few lines of jQuery instead of the stuff I have right now?

Upvotes: 5

Views: 17472

Answers (4)

nouman arshad
nouman arshad

Reputation: 463

for all above answers page reload occurs that i was facing using these answers so kindly use that jquery code for the above acepted answer to prevent default and page load

<script>
var $contents = $('.tab-content');
$contents.slice(1).hide();
$('.tab').click(function (event, ui) {
    var $target = $('#' + this.id + 'show').show();
    $contents.not($target).hide();
    event.preventDefault();
    return false;  
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

The problem with your code is you are repeating the same block of code for each element, instead you can use some common attributes to reduce the separate handlers like

First we add a common class to all the tab elements like tab, then another class tab-content is added to all the content elements, this will help us to select those elements easily.

Then the logic we are looking for is, we need to show only that content whose id matches with the clicked tab(the id of the content is <clicked tab id> + 'show').

Now we can have a single click handler which will target all the tab elements, in which we concatenate its id with 'show' to find the content to be shown and displays it via .show() then we hides all other tab-content elements.

Also note that we can cache the jQuery object for tab-content for later use.

var $contents = $('.tab-content');
$contents.slice(1).hide();
$('.tab').click(function() {
  var $target = $('#' + this.id + 'show').show();
  $contents.not($target).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tab1" class="tab">Test 1</div>
<div id="tab2" class="tab">Test 2</div>
<div id="tab3" class="tab">Test 3</div>
<div id="tab4" class="tab">Test 4</div>
<div id="tab5" class="tab">Test 5</div>

<br />
<br />

<div id="tab1show" class="tab-content">
  test 1 default = show
</div>

<div id="tab2show" class="tab-content">
  test 2
</div>

<div id="tab3show" class="tab-content">
  test 3
</div>

<div id="tab4show" class="tab-content">
  test 4
</div>

<div id="tab5show" class="tab-content">
  test 5
</div>

Upvotes: 11

Vishnu
Vishnu

Reputation: 12283

<div id="tab1" class="ta">Test 1</div>
<div id="tab2" class="ta">Test 2</div>
<div id="tab3" class="ta">Test 3</div>
<div id="tab4" class="ta">Test 4</div>
<div id="tab5" class="ta">Test 5</div>

<br /><br />

<div id="tab1show" class="tab">
    test 1 default = show
</div>

<div id="tab2show" class="tab">
    test 2
</div>

<div id="tab3show" class="tab">
    test 3
</div>

<div id="tab4show" class="tab">
    test 4
</div>

<div id="tab5show" class="tab">
    test 5
</div>

 $('#tab2show').hide();
 $('#tab3show').hide();
 $('#tab4show').hide();
 $('#tab5show').hide();

$('.ta').click(function () {
    $('.tab').hide();
    $("#"+$(this).attr("id")+"show").show();
});

JSFiddle

Upvotes: 1

dotnetom
dotnetom

Reputation: 24901

Here is one approach you can take:

First add a wrapping div over divs that you are clicking. This will make it easier to add event handlers:

<div id="clicks">
    <div id="tab1">Test 1</div>
    <div id="tab2">Test 2</div>
    <div id="tab3">Test 3</div>
    <div id="tab4">Test 4</div>
    <div id="tab5">Test 5</div>
</div>

Then wrap all your divs that you are showing / hiding with another div. This will make it easier to show / hide all divs:

<div id="tabShows">
    <div id="tab1show">test 1 default = show</div>
    <div id="tab2show">test 2</div>
    <div id="tab3show">test 3</div>
    <div id="tab4show">test 4</div>
    <div id="tab5show">test 5</div>
</div>

Then use this event handler:

// when user click on any div inside div 'clicks'
$('#clicks').on('click', 'div', function(event){

    // Get the id of a div that was clicked, e.g. tab1
    var tabId = $(this).attr('id');

    // Hide all divs inside div 'tabShows'
    $('#tabShows div').hide();

    // Show only div that was clicked, e.g. tab1show
    $('#' + tabId + 'show').show();
});

Here is the link to updated jsFiddle

Upvotes: 1

Related Questions