# Button list with babylonjs **URL:** \ **Category:** Questions\ **Created:** [August 9, 2021, 4:09pm UTC](https://forum.babylonjs.com/t/button-list-with-babylonjs/22932 "2021-08-09T16:09:02Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![mixofo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mixofo/32/7947_2.png) [@mixofo](https://forum.babylonjs.com/u/mixofo)\ **Post date:** [August 9, 2021, 4:09pm UTC](https://forum.babylonjs.com/t/button-list-with-babylonjs/22932/1 "2021-08-09T16:09:02Z")
Hello guys, Please i need to make buttons list like the attached images. I have 2 button , when i click in the first button , the childs button appears . And when i click the second button the first childs button diseaper and the second button appears . Also it is better to make it with css instead in the 3d scene , knowing that buttons are interacting with the mesh ? Thanks a lots ---
**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\ **Post date:** [August 9, 2021, 4:45pm UTC](https://forum.babylonjs.com/t/button-list-with-babylonjs/22932/2 "2021-08-09T16:45:41Z")
Hello there! All of this can be accomplished using the Babylon GUI. > **[The Babylon GUI | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#button)** > > Learn all about the Babylon.js 2D GUI system. Here is the documentation specifically for buttons. What you’re going to want to is create a stack panel GUI where you are adding and removing buttons to and from the stack panel based on which one is pressed. You can do this with the onPointerClickObservable which is attached to button. Let me know if you have any further questions about this 🙂 ---
**Author:** ![mixofo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mixofo/32/7947_2.png) [@mixofo](https://forum.babylonjs.com/u/mixofo)\ **Post date:** [August 9, 2021, 5:20pm UTC](https://forum.babylonjs.com/t/button-list-with-babylonjs/22932/3 "2021-08-09T17:20:19Z")
Thanks a lot ! I think it is exactly what i need , i used panel.addcontrol(button) to show the chidls buttons , but i dont find how to make them hide . Maybe there is a method like panel.removeControl(button ) ? ---
**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\ **Post date:** [August 9, 2021, 5:26pm UTC](https://forum.babylonjs.com/t/button-list-with-babylonjs/22932/4 "2021-08-09T17:26:19Z")
Ya. You will want to just remove them from the stack panel. And then add them back. I wonder if changing active to false leaves a blank space or removes it from view and allows the others to be in the right order. ---
**Author:** ![mixofo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mixofo/32/7947_2.png) [@mixofo](https://forum.babylonjs.com/u/mixofo)\ **Post date:** [August 10, 2021, 9:16am UTC](https://forum.babylonjs.com/t/button-list-with-babylonjs/22932/5 "2021-08-10T09:16:08Z")
Thank it is working, i changed the size to 0 to hide the undesirable elements, because if it is removed from the stack the order is also changing. I am facing another problem , i get this result ( attached image ) when the size of the stackpanel is changing , like if the axe of the stackpanel is ‘center’ . I need to make the axis on the top of the stackpanel .I tried all the function in the stackpanel Api but none of them is working , any help please ? Thanks a lot ---
**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\ **Post date:** [August 10, 2021, 4:35pm UTC](https://forum.babylonjs.com/t/button-list-with-babylonjs/22932/6 "2021-08-10T16:35:07Z")
Without a pg I’m not entirely sure what is wrong. Have you tried playing with the position? Perhaps you could try adding an invisible element before them all. ---
**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\ **Post date:** [August 11, 2021, 4:41pm UTC](https://forum.babylonjs.com/t/button-list-with-babylonjs/22932/8 "2021-08-11T16:41:41Z")
![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/7/e71072dd3f3d004473e4d5f70d498822c801dda0.png) Set the vertical alignment to Top and then the position down to 50%. You might want to do like 40% sih to account for the height of the stack panel.