 Hello everyone, this is Nitish from ByteScout and what we are going to do today is create a simple tutorial to show how states work in AlphanJS. So initially what we're going to do is create a simple HTML page and inside it we are going to create an edge section and then move on to create the body section and add in a simple div. This div is very important because as we already learned that the state has to be in the scope of the section that you are choosing, basically if you create a state in the AlphanJS then all the elements within that section will also get that state, will get access to a state. So we will get into it in a while. So next what we could do is create an H1 in where we type welcome to ByteScout AlphanJS tutorial and then next we create on a button as well. This button will come a lot handy It will come handy in a while. You will see how we use it I will name it this as struggle and the next we are going to see this page looks like this. So after we create the structure we have to basically use a CDN and copy and to make the AlphanJS available to this HTML page To do that we'll go to the GitHub repository and copy this CDN from there and paste it on our code Once done, we are now ready to add the state to this HTML code. As you can see, there's nothing Nothing is currently dynamic in nature. Everything is Soon as we call it right now. So we as we have created already created a deep tag We are going to add a state here. We do that with the help of xData attribute and And as we know like xData actually accept an object, a string So we create that within this we create is open and set it to True. So when we do that It's basically creating the state xData and we can use it on our elements Which is within the deep tag. Next what we do is to use the state. To use the state we use the X should attribute and In within this is we set the is open Yeah, so when you basically as is open is set to true So if you go there, you will see this as it is showing there But if we just change the state to false It will basically not show because we have set the X show to is open with which is currently set to false now this behavior is Very common in web pages So now right next we have to do is basically put this behavior to the toggle button We to do so what we'll do is click use the X on Click attribute which is available in alphine as well and we We set the is open to To not always open basically we changing the state of the is open It's currently boolean. Well, it's either on or off as you can see So once we do that you save the file we go here You see that it's loaded. There's nothing so but when we click on toggle it will show the Show the H1 Content here. So this is a very simple Implementation and as you go we go further you will see more complex implementation in Slight source images and side sidebar. That's it for now You