[SOLVED]How can show and hide a <li> inside the panel?

Questions
1

Hi, I have an app that has a login page. In order to login the user has the permission to see two voice inside the panel (if user is admin). If user is not admin I’d like to not display this voices. My problem is how to hide and show its. I have the panel inside index.html.

                                          <li id="company" display="none">
						<a href="/aziende/" class="panel-close" >
							<div class="item-content">
								<div class="item-media">
									<i class="f7-icons ios-only">home</i>
									<i class="material-icons md-only">home</i>
								</div>
								<div class="item-inner">
									<div class="item-title">Company</div>
								</div>
							</div>
						</a>	
					</li>

					<li id="users" display="none">
						<a href="/users/" class="panel-close">
							<div class="item-content">
								<div class="item-media">
									<i class="f7-icons ios-only">person</i>
									<i class="material-icons md-only">account_circle</i>
								</div>
								<div class="item-inner">
									<div class="item-title">Users</div>
								</div>
							</div>
						</a>
					</li>

this is my script inside index.html

 <script>
	if(localStorage.getItem("userGroup") == 'admin')
	{
	document.getElementById("company").display = "block";
	document.getElementById("users").display = "block";
	}
</script>

I saw that method is exectued only if I refresh the page

2

Hi, thats all your code? bcs i dont see a method.
You need to look for a condition to run your code. Some checkbox, button, etc
eg:

<button class="button" id='myButton'>Is Admin</button>

var $$ = Dom7
...
$$('#myButton').on('click', () => {
  localStorage.setItem("userGroup", 'admin')
  ...
  checkAdminStatus()
})

function checkAdminStatus () {
  if(localStorage.getItem("userGroup") == 'admin')
    {
      document.getElementById("company").display = "block";
      document.getElementById("users").display = "block";
    }
}
3

I have this code in my login method

but if I call this method the console said me that Cannot set property ‘display’ of null

4

i think you are trying to hide the li before its render, that’s why you get undefined.
move your logic to open event of the panel

https://framework7.io/docs/panel.html#app-and-panel-instance-events

1 Like