How to Show and Hide UI panel interchangeably with button onclick in unity 2017.1.of 3

Hello guys, i got this code from an online tutorial i watched, it’s about showing and hiding panel with a button clicked interchangeably, however, this doesn’t seem to work rightly in unity 2017, Could anybody please suggest the right way to go about this, i’d be very grateful

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ShowHide : MonoBehaviour 
{
	public GameObject panel;
	int counter;

	public void SwitchShowHide()
	{
		counter++;

		if (counter % 2 == 1)
		{
			panel.gameObject.SetActive (false);
		} 
		else
		{
			panel.gameObject.SetActive (true);
		}
	}

}

This is a bit odd to use an integer to hold a true/false state.

I would rather to it this way :

public class ShowHide : MonoBehaviour 
 {
     public GameObject panel;
     bool state;
 
     public void SwitchShowHide()
     {
         state = !state; 
         panel.gameObject.SetActive (state);
     }
 }

I’m using this code, but im running into the issue where they overlap when you click both buttons. I am trying to stop that from happening…

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class CloseOpenUI : MonoBehaviour
{
    public GameObject upgPanel;
    public GameObject rbupgPanel;



    /* In order for this to work it must be attached to your 
     * gamemanager object & attached to the onclick function 
     * on the buttons
     */

    public void UpgOpenPanel()
    {
        if (upgPanel != null)
        {
            bool isActive = upgPanel.activeSelf;
            upgPanel.SetActive(!isActive);
        }
    }

    public void RbOpenPanel()
    {
        if (rbupgPanel != null)
        {
            bool isActive = rbupgPanel.activeSelf;
            rbupgPanel.SetActive(!isActive);
        }
    }

}

I also have the same problem