# Elements won\`t hide/show by class name: oneditprepare
**URL:** https://discourse.nodered.org/t/elements-won-t-hide-show-by-class-name-oneditprepare/38197
**Category:** Developing Nodes
**Created:** [29 December 2020 11:07 UTC](https://discourse.nodered.org/t/elements-won-t-hide-show-by-class-name-oneditprepare/38197 "2020-12-29T11:07:35Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@lizzardguki](https://discourse.nodered.org/u/lizzardguki)
#### Post date: [29 December 2020 11:07 UTC](https://discourse.nodered.org/t/elements-won-t-hide-show-by-class-name-oneditprepare/38197/1 "2020-12-29T11:07:35Z")
So i started building some nodes after a couple of months, and with my small experience with it, I already came on an error.
I have some elements in the node config (a couple of dropboxes/ and textboxes) that should show hide, based on what will be selected from the Function dropbox `node-input-functype`
So inside `oneditprepare` function, I created an if-else logic what should be shown and what shouldn't
example:
```auto
oneditprepare: function() {
$(".dropdown-referenceIO").hide();
$(".dropdown-reference").hide();
$(".frequencyrow").hide();
$(".dropdown-settingIO").hide();
$(".dropdown-resolution-row").hide();
$(".set-row").hide();
$('.set-row-value').hide();
$(".get-row").hide();
var ace = this;
this.editor = RED.editor.createEditor({})
$("#node-input-functype").on('change', function(){
if ($("#node-input-functype").val() == "reference" ){
$(".dropdown-referenceIO").show();
$(".dropdown-reference").show();
$(".dropdown-settingIO").hide();
$(".dropdown-resolution-row").hide();
$(".set-row").hide();
$('.set-row-value').hide();
$(".get-row").hide();
}
if ($("#node-input-functype").val() == "setting" ){
$(".dropdown-settingIO").show();
$(".dropdown-resolution-row").show();
$(".dropdown-referenceIO").hide();
$(".set-row").hide();
$('.set-row-value').hide();
$(".get-row").hide();
$(".dropdown-reference").hide();
}
if ($("#node-input-functype").val() == "set" ){
$(".set-row").show();
$('.set-row-value').show();
$(".dropdown-reference").hide();
$(".dropdown-referenceIO").hide();
$(".dropdown-resolution-row").hide();
$(".get-row").hide();
$(".dropdown-settingIO").hide();
$(".dropdown-resolution-row").hide();
$(".dropdown-referenceIO").hide();
}
if ($("#node-input-functype").val() == "get" ){}
$(".get-row").show();
$(".dropdown-reference").hide();
$(".set-row").hide();
$('.set-row-value').hide();
$(".dropdown-referenceIO").hide();
$(".dropdown-resolution-row").hide();
$(".dropdown-settingIO").hide();
$(".dropdown-resolution-row").hide();
$(".dropdown-referenceIO").hide();
} )
$("#node-input-referenceIO").change(function() {
if ($("#node-input-referenceIO").val() == "OUTPUT" ){
$(".dropdown-reference").hide();
$(".frequencyrow").show();
}
else if ($("#node-input-referenceIO").val() == "INPUT" ){
$(".dropdown-reference").show();
$(".frequencyrow").hide();
}
})
ace.editor.renderer.updateFull();
}
```
There are also 3 more options, but I am not trying to bombard you with the code on this topic...
Now when I try to display other elements via the debug console, it Is successful, all of the elements are shown/hidden by the class name.
But when I try to change the value of the `#node-input-functype` dropbox, nothing happens...
Could someone help me? so far I copied this from the SQLite node, and I had the same problems on another node, but it just started working surprisingly...
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [29 December 2020 11:19 UTC](https://discourse.nodered.org/t/elements-won-t-hide-show-by-class-name-oneditprepare/38197/2 "2020-12-29T11:19:49Z")
firstly, delete this line.
> [@lizzardguki](#):
>
> `var ace = this;`
... it seems to serve no purpose and potentially collides with the editor namespace. Also, in future, ACE may not even be the editor.
Next, using browser dev tools (F12) console, what do you see if you enter `$("#node-input-functype")` into the console? Do you get any elements?
* * *
Other tips...
Add the keyword `debugger` at the top of `oneditprepare` function...
```auto
oneditprepare: function() {
debugger
$(".dropdown-referenceIO").hide();
}
```
refresh your browser
open your devtools (F12)
open the UI - the debugger should stop on the keyword debugger.
Now you can put breakpoints around your code & step the statements & check that things are occuring as they should.
---
### Author:  [@lizzardguki](https://discourse.nodered.org/u/lizzardguki)
#### Post date: [29 December 2020 11:30 UTC](https://discourse.nodered.org/t/elements-won-t-hide-show-by-class-name-oneditprepare/38197/3 "2020-12-29T11:30:40Z")
When i use
`$("#node-input-functype").val()` inside the console, I get back the string that is selected from the dropdown.
Thanks for the debugger method , learned something new today 😄
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [12 January 2021 11:30 UTC](https://discourse.nodered.org/t/elements-won-t-hide-show-by-class-name-oneditprepare/38197/4 "2021-01-12T11:30:41Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.