This seems to be a common problem?
anyway, here is the code
/*****CSS***/
.hidden {
display: none;
}
<!--- my html --->
<div id="buttonCenter">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="console">Console</div>
</div>
// My jQuery
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("activeButton");
var panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
})
When I alert the panelId, it seems to recognize the ID and assign accordingly. I just can’t seem
to make my panels hidden. Also, I don’t know how to display my HTML code in here without it actually displaying it. I assigned each of the languages titles to a button, including “Console”. I can toggle those active and inactive. I’m not sure where my last line of jQuery is going wrong. That seems to be the only issue.
@DennisM831,
do you mind posting the entirety of your code so we can see what is going on regarding your HTML layout?
Also, it would help to see what other CSS rules you have and any other JS code that you wrote.
It would help us better understand how to help you.
Just from looking at the snippet you posted, every time an element with the class toggleButton is clicked, the class activeButton is removed from it. Is that the behavior you want?
I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
you have div without controls, you need to have something to trigger it. Also, the jQuery way of togging boxes is using jquery toggle.
here is an example:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
but depending if you need to toggle between there are better methods (like using unordered lists) which would be pure css.
if we look at javascript, if you have several buttons and corresponding divs, and only want to toggle one box, this is what I came up with:
<button onclick="showit('flowers');">flowers</button> <button onclick="showit('butterflies');">butterflies</button>
<div id="flowers" >Flowers are good for eating</div><div id="butterflies" >Butterflies are free to fly</div>
Now, the javascript (either in the body, but perferrable in the head tag:
function showit(x){
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
what its doing above is sending the id of the div I want to toggle in the button’s JavaScript onclick event as a variable, then the script applies the opposite of the style condition.
1 Like
Hey guys, I really appreciate the help. I actually solved the issue shortly after this post I just came down with a cold and was bed ridden…anyway. So, there’s another part of the HTML I had, but I didn’t know it was a part of what I needed at the time.
<div id="main-container">
<textarea id="htmlArea" class="panel"><p id="para">Hello World</p></textarea>
<textarea id="cssArea" class="panel hidden">p { color: green; }</textarea>
<textarea id="javascriptArea" class="panel hidden">document.getElementById("para").innerHTML = "This is Dennis";</textarea>
<iframe id="consoleArea" class="panel"></iframe>
</div>
I kept trying to concatenate “Panel” 4th line of my jQuery, when I had “Area” assigned at the end of the ID for each “textarea”. I actually wrote a CSS action function to see if the selectors would work with something else. After this, I took a look at the 3rd line, and when I deleted “Panel”, I had the “ah ha!” moment. Thanks again for taking your time to help!!! Time to get back to coding!!