CODEWITHSUNDEEP
javascripthtmltabsshow
Hamidjon
Hamidjon

Reputation: 1

Javascript: show hidden div when select another div

I'm zERO at JS and therefore I decided to ask quickly )) and when I see the quick result, maybe I start to love JS... So, I have a such construction:

<div id="tuto-thumbox" class="mini_gallery" style="float:left">...</div>

and 

<div id="tuto-thumbox2" class="mini_gallery" style="float:left">...</div>

and

<div class="tabs_block">
<ul id="tabs">
  <li>...</li>
  <li>...</li>
</ul>
<div id="tabs_content">
  <div id="tab1">...</div>
  <div id="tab2">...</div>
</div>

<div id="tuto-thumbox"></div> and <div id="tuto-thumbox2"></div> are hidden (display:hidden). If I click on <div id="tab1"></div> (it is a tab) the <div id="tuto-thumbox"></div> must be show. And If I click on <div id="tab2"></div> (it is a tab) the <div id="tuto-thumbox2"></div> must be show.

I found something like this:

$(document).ready(function() {
$('.item-selected').css('display', 'none');

$('#horizontal-multilevel-menu li').hover(
    function () {
        $(this).next().css('background-image', 'none');
    },
    function () {
        $(this).next().css('background-image', 'url("/bitrix/templates/freelancer/components/bitrix/menu/mainmenu_horizontal_multilevel/images/menu-li-divider.png")');
        $('.item-selected').next().css('background-image', 'none');
    }
);

});

but I don't know how to rewrite it and it seems that it does another thing...

SOLUTION: I asked wrong questions, so sorry for mislead. Here I founded needed code, I hope it will be helpful another ones...

Upvotes: 0

Views: 411

Answers (2)

Alkis Kalogeris
Alkis Kalogeris

Reputation: 17745

Try this one.

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

     $("#tuto-thumbox").toggle();
});

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

     $("#tuto-thumbox2").toggle();
})

The above uses jquery. JQuery is a library for javascript that adds a lot of helpful methods for DOM manipulation. Don't forget to include it.

Check this for the use of toggle() .

Upvotes: 0

Navajyoth CS
Navajyoth CS

Reputation: 1038

     //if you are using javascript

     //html
       <div id="tab1" onclick="tab1click()">...</div>
       <div id="tab2" onclick="tab2click()">...</div>

     //javascript

     function tab1click()
     {

     document.getElementById("tuto-thumbox").style.display = '';

     }

     function tab2click()
     {

     document.getElementById("tuto-thumbox2").style.display = '';

     }



     //If you are using JQuery you have to add JQuery plugin


     $(document).ready(function(){

     $("tab1").click(function(){
        $("tuto-thumbox").show();
     })

     $("tab2").click(function(){
        $("tuto-thumbox2").show();
     })

     });

Upvotes: 2

Related Questions