CODEWITHSUNDEEP
javascriptjqueryhtml
musa
musa

Reputation: 339

How to display contents of div instead of value when a button is pressed?

I want the button to display one div at a time through button click. How do I go around doing that? Or where do I start. I am new to JavaScript. So far, most examples that I saw is return a value instead. Below is the code:

function showDiv(me) {
  /* Disabled buttons accordingly*/
  $('.navbutton').prop('disabled', false);
  $(me).prop('disabled', true);

  /*How do I show the contents of each division only when their respective button is pressed*/

  /*Below is show the value when their respective button is pressed*/
  $('#myDiv').html($(me).val());

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="firstbutton">
  <button class="navbutton" value="home" onclick="showDiv(this);">Table</button>
  <table>
    <tr>
      <th>Column A</th>
    </tr>
    <tr>
      <td>A.1 Introduction</td>
    </tr>
    <tr>
      <td>A.2 History</td>
    </tr>
  </table>
</div>

<div id="secondbutton">
  <button class="navbutton" value="about" onclick="showDiv(this);">Others</button>
  <h2>Miscellaneous items</h2>
</div>

<div id="myDiv"></div>

Upvotes: 1

Views: 93

Answers (3)

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

try this

    function showDiv(me) {
        /* Disabled buttons accordingly*/
        $('.navbutton').prop('disabled', false);
        $(me).prop('disabled', true);
        //the below line will get the innerHTML of this clicked elements parent node and place that content in div with id "myDiv"
        $('#myDiv').html(me.parentNode.innerHTML);

    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="firstbutton">
  <button class="navbutton" value="home" onclick="showDiv(this);">Table</button>
  <table>
    <tr>
      <th>Column A</th>
    </tr>
    <tr>
      <td>A.1 Introduction</td>
    </tr>
    <tr>
      <td>A.2 History</td>
    </tr>
  </table>
</div>

<div id="secondbutton">
  <button class="navbutton" value="about" onclick="showDiv(this);">Others</button>
  <h2>Miscellaneous items</h2>
</div>

<div id="myDiv"></div>

Upvotes: 1

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92427

try

$('#myDiv').html(me.parentElement.innerHTML);


function showDiv(me) {
        /* Disabled buttons accordingly*/
        $('.navbutton').prop('disabled', false);
        $(me).prop('disabled', true);

       /*How do I show the contents of each division only when their respective button is pressed*/

        /*Below is show the value when their respective button is pressed*/
        
        $('#myDiv').html(me.parentElement.innerHTML);

    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbutton">
    <button class="navbutton" value="home" onclick="showDiv(this);">Table</button>
    <table>
        <tr>
            <th>Column A</th>
        </tr>
        <tr>
            <td>A.1 Introduction</td>
        </tr>
        <tr>
            <td>A.2 History</td>
        </tr>
    </table>
</div>

<div id="secondbutton">
    <button class="navbutton" value="about" onclick="showDiv(this);">Others</button>
    <h2>Miscellaneous items</h2>
</div>

<div id="myDiv"></div>

Upvotes: 0

Faiz Infy
Faiz Infy

Reputation: 91

Here an example. Make use of jquery function. .show()

JAVASCRIPT

function showDiv() {
    $('#myDiv').show(100);
}

HTML

<button class="navbutton" value="about" onclick="showDiv();">Others</button>

Upvotes: 0

Related Questions