Display paragraph with different ids on a button click in HTML

I have a single button on my HTML page and two paragraphs say id = 'para_1' and id = 'para_2'. I want to display content in para_1 on load the page and on every second click of the button and content in para_2 on every first click of the button.

You could set the visibility of the second paragraph to display:none inline so the paragraph is hidden on page load and toggle the visibility of the two paragraphs using the ternary operator, removing the need for the id parameter:

<input type=button name=type id='bt1' value='Show Layer' onclick="setVisibility();">
<p id="para_1">display this is on load and second click</p>
<p id="para_2" style="display:none">display this on first click</p>

If you used jQuery you could achieve the same functionality by toggling the visibility of paragraphs when clicking the button:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=button name=type id='bt1' value='Show Layer' onclick="setVisibility();">
<p id="para_1">display this is on load and second click</p>
<p id="para_2" style="display:none">display this on first click</p>