How To Make Frame Close When Another Opens

I have two topbar icons that each open their own frame. What I want to do is have one frame close when another opens. I want to make a system that closes one frame when another is opened that way only one frame is visible. So what would be the best way to do this?

I also have this but it’s not working

local Frame1 = game.StarterGui.trailShopUI.mainFrame
local Frame2 = game.StarterGui.GravityGui.Frame

if Frame1.Visible == true then
	
	Frame2.Visible = false
	
else
	
	if Frame2.Visible == true then
		
		Frame1.Visible = false	
		
	end
	
end

You store the last frames current state and when the other frame opens you just set it state to false and also turn it off. I cant provide code due to being on mobile.

I tried doing that but it didn’t work (I probably did it wrong I’m new to scripting as you can tell)

local Frame1 = game.StarterGui.trailShopUI.mainFrame
local Frame2 = game.StarterGui.GravityGui.Frame

local function Switch()
    Frame2.Visible = not Frame1.Visible
end

Just run the switch function whenever you would want now.

it doesnt work which is weird because it should

1 Like

I’ve read through the replies and the script you provided and have written my own.

You can use this snippet and test it out with your own code as i wrote it how i usually write my scripts and I’ve tested it with a button and it works:

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer
if not localPlayer then
	Players:GetPropertyChangedSignal("LocalPlayer"):Wait()
	localPlayer = Players.LocalPlayer
end

local PlayerGui = localPlayer:FindFirstChildOfClass("PlayerGui") or localPlayer:WaitForChild("PlayerGui")
local TrailShopGui = PlayerGui:WaitForChild("TrailShopGui")
local GravityShopGui = PlayerGui:WaitForChild("GravityShopGui")
local ScreenGui = PlayerGui:WaitForChild("ScreenGui") -- The Gui Button ScreenGui

local SwitchVisibilityButton = ScreenGui:WaitForChild("SwitchVisibilityButton") -- Button for Switching frame visibility

local Frame1 = TrailShopGui:WaitForChild("MainFrame")
local Frame2 = GravityShopGui:WaitForChild("Frame")

local function SwitchGuiVisibility()

	if Frame1.Visible == true and Frame2.Visible == false then
		Frame1.Visible = false
		Frame2.Visible = true
		
	elseif Frame2.Visible == true and Frame1.Visible == false then
		Frame1.Visible = true
		Frame2.Visible = false
	end

end

SwitchVisibilityButton.Activated:Connect(SwitchGuiVisibility)

Let me know if this helps!

Edit: I made a tiny error and created an extra button so i modified the script slightly (basically still the same as it was) so 1 button click would switch the frames visibility.

1 Like

I am using topbar buttons with topbar plus instead of TextButtons so how can I modify this to work with that?

This is what i came up with when using TopbarPlus and i’ve tested it and it works:

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Icon = require(ReplicatedStorage:WaitForChild("Icon"))

local localPlayer = Players.LocalPlayer
if not localPlayer then
	Players:GetPropertyChangedSignal("LocalPlayer"):Wait()
	localPlayer = Players.LocalPlayer
end

local PlayerGui = localPlayer:FindFirstChildOfClass("PlayerGui") or localPlayer:WaitForChild("PlayerGui")
local TrailShopGui = PlayerGui:WaitForChild("TrailShopGui")
local GravityShopGui = PlayerGui:WaitForChild("GravityShopGui")

local Frame1 = TrailShopGui:WaitForChild("MainFrame")
local Frame2 = GravityShopGui:WaitForChild("Frame")

local icon1 = Icon.new()
	icon1:setLabel("TrailShop")
	icon1:setLeft()
	:bindEvent("selected", function()
		
		if Frame1.Visible == false or Frame1.Visible == false and Frame2.Visible == true then
			Frame1.Visible = true
			Frame2.Visible = false
		end
		
	end)
	:bindEvent("deselected", function()
		Frame1.Visible = false
	end)

local icon2 = Icon.new()
	icon2:setLabel("GravityShop")
	icon2:setLeft()
	:bindEvent("selected", function()

		if Frame2.Visible == false or Frame2.Visible == false and Frame1.Visible == true then
			Frame1.Visible = false
			Frame2.Visible = true
		end

	end)
	:bindEvent("deselected", function()
		Frame2.Visible = false
	end)

Hope this helps!

Edit:
I forgot to say, You would bind them with TopbarPlus’s :bindEvent function and pass the selected argument as the first argument of the function as it has selected, deselected, and hovering as it’s first parameter for the icon event name i believe.

You use selected to basically say “Hey, run this function when this icon is selected!”.

It uses the same principals and methods of the first reply, only a tiny bit of change and add-on to make it more efficient and a bit safer for checks.

You can read more about the :bindEvent function here.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.