I have never encountered the practice of using dots before opening parentheses before.
For example:
document.getElementById.("p2").p2.removeAtribute.("hidden")
should actually be
document.getElementById("p2").removeAtribute("hidden")
(Also, referencing the element by id after retrieving it is unnecessary.)
The first example didn't work because you retrieved the element but did not take any action with it, and then tried to access a p2 variable that was not defined. Additionally, there is a . before the parentheses.
Here is an example in JavaScript:
function changeVisibility()
{
var p2 = document.getElementById('p2');
switch (p2.style.visibility)
{
case 'hidden':
document.getElementById('p2').style.visibility = 'visible';
break;
case 'visible':
document.getElementById('p2').style.visibility = 'hidden';
break;
}
}
<div id="p2" style="visibility:hidden">
test
</div>
<br />
<button onclick="changeVisibility()">
change visibility with basic js
</button>
And here is an example using jQuery:
function changePage()
{
$('#p2').toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p2" style="display:none">
test
</div>
<br />
<button onclick="changePage()">
change visibility with basic js
</button>
The basic JavaScript version uses the visibility style, which only makes the element invisible without collapsing it.
jQuery has a convenient built-in .toggle function that alters the display of the element. It collapses the element if it is hidden and displays it according to the display style when visible. Implementing this functionality in basic JavaScript would require more effort as you would need to track the state if you want to make the method reusable. jQuery can mimic the basic JavaScript version by using CSS properties, but toggle is simpler and more elegant.
Your main issue was mixing element retrieval with methods exclusive to jQuery objects. I recommend reviewing jQuery tutorials on basic accessors for getting elements by id, class name, etc.