Ufdjrw

I have designed a small page : DEMO Site, there is a botton for toggling a section from left to right (and back) , please have a look there. With this botton I would like to use only aria-haspopup or aria-expandet or similar what is appropriate, I would like to slash this section from left to right and vice versa. If possible I want to do it that way and no java-script. In my example, I did everything this way and yet nothing is happening and I'm wondering why. What have i done wrong and / or is there a good online example i can stick to? Can someone take a look? PLEASE! Why is my example working although it does not have to work?
Best best T.

EDIT: (I`m sorry)

/* Grundlayout */
 * 
 margin:0; 
 padding: 0; 
 box-sizing: border-box;
 
 html 
 height: 100vh;
 
 html>body 
 max-width: 66em;
 margin: 0 auto;
 
 body 
 border: 5px dotted #c5c5c5;
 

 main 

 
 header 
 width: 100%;
 height: 2.5em;
 border: 4px dotted #008686;

 
 article#main 
 position:relative;
 overflow: hidden;
 width: 100%;
 height: 100%;
 border: 7px dashed #fdfd00;
 
 article#menuepunkte 
 position: absolute;
 -webkit-transition: left 0.4s ease-in-out;
 -moz-transition: left 0.4s ease-in-out;
 -ms-transition: left 0.4s ease-in-out;
 -o-transition: left 0.4s ease-in-out;
 transition: left 0.4s ease-in-out;
 background-color: #ffc;
 left: -100%;
 width: 100%;
 height: 100%;
 border: 7px dashed #00aa00; 
 
 article#contentspan 
 display: flex;
 flex-direction: row;
 position: relative;
 -webkit-transition: left 0.4s ease-in-out;
 -moz-transition: left 0.4s ease-in-out;
 -ms-transition: left 0.4s ease-in-out;
 -o-transition: left 0.4s ease-in-out;
 transition: left 0.4s ease-in-out;
 left: 0%;
 background-color: transparent;
 width: 100%;
 height: 100%;
 border: 4px dashed #ff6622; 
 
 nav#menuebottons 
 width: 100%;
 height: 100%;
 border: 7px dashed #46eb1d;
 
 article#maincontentspan 
 position:relative;
 overflow: hidden;
 width: 100%;
 height: 100%;
 border: 4px dashed #eb44e5;
 
 section#maincontent_A 
 position: absolute;
 -webkit-transition: left 0.4s ease-in-out;
 -moz-transition: left 0.4s ease-in-out;
 -ms-transition: left 0.4s ease-in-out;
 -o-transition: left 0.4s ease-in-out;
 transition: left 0.4s ease-in-out;
 background-color: #ffc;
 left: -100%;
 width: 100%;
 height: 100%;
 border: 7px dashed #39bbe3;
 
 section#maincontent_B 
 position: relative;
 -webkit-transition: left 0.4s ease-in-out;
 -moz-transition: left 0.4s ease-in-out;
 -ms-transition: left 0.4s ease-in-out;
 -o-transition: left 0.4s ease-in-out;
 transition: left 0.4s ease-in-out;
 left: 0%;
 background-color: transparent;
 width: 100%;
 height: 100%;
 border: 7px dashed #2c8099;
 


 /* nav specific */

 nav > button display: block; width: 3rem;
 nav button:hover, nav button:focus 
 background: hsla(0, 100%, 100%, 0.8);
 

 /* Buttons mit Icons anreichern */

 .submenu-button[aria-expanded="true"]::before content: 'f355'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 1.9rem; /* arrow-alt-left */
 .mainmenu-button[aria-expanded="true"]::before content: 'f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 1.9rem; /* fa-times X */
 .submenu-button[aria-expanded="true"]::after, .mainmenu-button[aria-expanded="true"]::after content: "schliessen"; white-space: normal; font-size: 14px; display: none; 

 .submenu-button[aria-expanded="false"]::before content: 'f356'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 1.9rem; /* arrow-alt-right */
 .mainmenu-button[aria-expanded="false"]::before content: 'f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 1.9rem; /* fa-bars Sandwich */
 .submenu-button[aria-expanded="false"]::after, .mainmenu-button[aria-expanded="false"]::after content: "öffnen"; white-space: normal; font-size: 14px; display: none; 

 .submenu-button[aria-expanded="false"]>section#maincontent_A 
 position:absolute;
 width: 100%; height: 100%; overflow:hidden;
 left: 0;
 top: 0; 
 /* Sandwich Button hidden */

 .submenu-button[aria-expanded="true"]>section#maincontent_A 
 position: relative;
 left: -100%;
 /* Sandwich Button hidden */


 /* sonstiges*/
 .visually-hidden 
 position: absolute !important;
 height: 1px; width: 1px;
 overflow: hidden;
 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 clip: rect(1px, 1px, 1px, 1px);
 

 }

<body>
 <main>
 <header> --header-- Bob Ross </header>
 <article id="main"> <!-- GELB -->
 <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
 <nav id="menuebottons"> <!-- HELL GRÜN -->
 <button class="submenu-button" aria-expanded="false"><span class="visually-hidden">SubNavigation Item 2</span></button>
 </nav> 
 <section id="maincontent_A"> <!-- BLAU 1 hell -->
 <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
 <p> It's life. It's interesting. It's fun. I want everbody to be happy. That's what it's all about. Let's build an almighty mountain.

 Almost everything is going to happen for you automatically - you don't have to spend any time working or worrying. You can do anything here. So don't worry about it. Fluff that up. I guess I'm a little weird. I like to talk to trees and animals. That's okay though; I have more fun than most people. Remember how free clouds are. They just lay around in the sky all day long. I'm a water fanatic. I love water.

 Just a little indication. Follow the lay of the land. It's most important. It's hard to see things when you're too close. Take a step back and look.

 I think there's an artist hidden in the bottom of every single one of us. We'll lay all these little funky little things in there. I sincerely wish for you every possible joy life could bring. All kinds of happy little splashes. Everyone is going to see things differently - and that's the way it should be. You have freedom here. The only guide is your heart.

 When things happen - enjoy them. They're little gifts. There is no right or wrong - as long as it makes you happy and doesn't hurt anyone. I really recommend you use odorless thinner or your spouse is gonna run you right out into the yard and you'll be working by yourself. Just think about these things in your mind - then bring them into your world. You can create the world you want to see and be a part of. You have that power. If it's not what you want - stop and change it. Don't just keep going and expect it will get better. 
 </p>
 </section>
 <section id="maincontent_B"> <!-- BLAU 1 dunkel -->
 <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
 <p> In life you need colors. You have to make these big decisions. Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned. We'll throw some old gray clouds in here just sneaking around and having fun. Just relax and let it flow. That easy. It's almost like something out of a fairytale book.

 Nature is so fantastic, enjoy it. Let it make you happy. You can do it. I spend a lot of time walking around in the woods and talking to trees, and squirrels, and little rabbits and stuff.

 Everybody's different. Trees are different. Let them all be individuals. Brown is such a nice color. We can fix anything. See there, told you that would be easy.

 There are no limits in this world. We'll put a happy little bush here. Don't forget to tell these special people in your life just how special they are to you.

 Go out on a limb - that's where the fruit is. We must be quiet, soft and gentle. We'll paint one happy little tree right here.

 These trees are so much fun. I get started on them and I have a hard time stopping. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate things. Play with the angles. If what you're doing doesn't make you happy - you're doing the wrong thing. 
 </p>
 </section>
 </article>
 </main>
 <footer>
 <p>Copyright © 2019 Bob Ross. Alle Rechte vorbehalten.</p>
 </footer>

<script>
 _items = document.querySelectorAll( '[aria-expanded]' );
 for ( x=0; x<_items.length; x++ ) 
 _items[x].setAttribute( 'aria-expanded', "false" );
 _items[x].addEventListener( 'click', function(e) 
 this.setAttribute('aria-expanded', (this.getAttribute('aria-expanded')=="false"));
 );
 
</script> 
</body>