CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3304642
user3304642

Reputation: 191

javascript table tricks to hide and show division right to the click button

I almost finished my code in which I am trying to show division right to the click button, as you can see in fiddle my javascript is working and functioning well but I don't know how to place right to click button and position of division is not fixed it should change according to button position, right now in my code hidden divisions are coming on top but I expect it to come right to button, this hidden divisions I generating through php

Link to fiddle

I hope you guys will understand my problem, and sorry for my bad English

HTML

    <div style='display:none' id='id_1'>
        <table border='1'>
            <tr><td>info1</td>
                <td>info1</td>
                <td>info1</td>
            </tr>
     <tr>
                <td>info1</td>
                <td>info1</td>
                <td>info1</td>
            </tr>
        </table>
    </div>

    <div  style='display:none' id='id_2'>
        <table border='1'>
            <tr><td>info2</td>
                <td>info2</td>
                <td>info2</td>
            </tr>
             <tr><td>info2</td>
                <td>info2</td>
                <td>info2</td>
            </tr>
        </table>
    </div>

   <br>
  <table border='1'>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
        <td><button onclick="tab('id_1');">More info</button>
    </tr> 
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td><button onclick="tab('id_2');">More info</button>
    </tr> 
  </table>

JAVASCRIPT 

     function tab(id) {
        $('div[id^=id_]').hide();
        setTimeout(function() { alert(id);},10);     
        var data = document.getElementById(id);
        data.style.display = 'table';
     };

Upvotes: 0

Views: 501

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Using your code, you could set these DIVs absolutely positioned and use:

DEMO

function tab(btn, id) {
    var offset = $(btn).offset();
    $('div[id^=id_]').hide();
    $('#' + id).css({
        top: offset.top,
        left: offset.left + $(btn).outerWidth(true)
    }).show();
};

HTML:

<button onclick="tab(this, 'id_1');">More info</button>

CSS:

div[id^=id_] {
    position:absolute;
}

UPDATE:

updated DEMO

function tab(btn, id) {
    var $tr = $(btn).closest('tr'),
        offset = $tr.offset();
    $('div[id^=id_]').hide();
    $('#' + id).css({
        top: offset.top,
        left: offset.left + $tr.outerWidth(true)
    }).show();
};

Upvotes: 3

Related Questions