toggle class content on click from nav - javascript

I have a simple page with 15 elements in the Nav bar (only 4 in the jsfiddle example to keep the code short).
I have a javascript that moves the border-bottom display on click on the nav bar elements but I would also like the content of the div underneath to change based on which nabber item is clicks.
This is the jsfiddle.
Ive tried getElementByID but I somehow cant seem to change the class under my #tabs-content div...
I would like a javascript loop that changes the content of each section element's class from hide to show or show to hide depending on what the content is.
This is the o'clock event in my
<li class="tab-current"><span>Dashboard</span></li>
and I would like it to change the class from hide to show for id=section2 and from show to hide for section2:
<div id="tabs-content">
<section id="section1" class="show">
<p>1</p>
</section>
<section id="section2" class="hide">
<p>2</p>
</section>
</div>
Any ideas please?
Cheers,
M.

Is this what you are looking for? Since you have the id of each section in the href you can pull that to load the appropriate one:
JS
var currentTab = $(this).find("a").attr("href");
$(currentTab).show().siblings("section").hide();
Change CSS (unless you want the elements to take up space on the page its better to set to display: none):
#tabs-content section.show {
display: block
}
#tabs-content section.hide {
display: none;
}
JSFIDDLE

Related

How to hide one section of the page and show the other section when a heading is clicked? jQuery

I made this example up in jsfiddle: http://jsfiddle.net/yt88bsnf/1/
One section has a display of none, and the other is shown. What I am trying to accomplish is when the one of the h2 element is clicked, that section below becomes shown (unless it is already shown, then it would stay shown), and the other h2 element display changes to none (unless it already has a display of none).
Any help or suggestions would be greatly appreciated! Thanks
HTML:
<div id="container">
<h2>Section One</h2>
<h2>Section Two</h2>
</div>
<div id="section_one">
This is Section One
</div>
<div id="section_two">
This is Section Two
</div>
CSS:
#container{
overflow:hidden;
}
#container h2{
float:left;
margin-right:30px;
cursor:pointer;
}
#section_two{
display:none;
}
Check this fiddle
You can use jquery show() and hide(). For more information see W3Scools
And for the docs see here
show()
hide()
JS
$("#header1").click(function () {
$("#section_one").show();
$("#section_two").hide();
});
$("#header2").click(function () {
$("#section_two").show();
$("#section_one").hide();
});
HTML
<div id="container">
<h2 id="header1">Section One</h2>
<h2 id="header2">Section Two</h2>
</div>
<div id="section_one">This is Section One</div>
<div id="section_two">This is Section Two</div>
I've added each h2 an id (header1 and header2) and used that id to show and hide the divs respectively..Please Try it..
with jQuery you can use
$(document).ready(function() {
$('#button1').on('click', function() {
$('#section_one').show();
$('#section_two').hide();
});
$('#button2').on('click', function() {
$('#section_one').hide();
$('#section_two').show();
});
});
i added two id's to the h2's to reference them for the click event.
if you are using more than two sections you might want to use a loop to iterate through them and change their visibility. in that case you could also use the h2's index to check which section should be shown.
see FIDDLE
JS Fiddle Live Demo
An easy way to do it would be to wrap these in their individual parents like:
<div class="parent">
<h1>Section One</h1>
<p>Section One</p>
</div>
<div class="parent">
<h1>Section Two</h1>
<p style="visibility: hidden;">Section Two</p>
</div>
This way you can add multiple sections in your dom and this jQuery would be enough:
$(".parent").children("h1").click(function(){
$(".parent").children("p").css("visibility", "hidden");
$(this).siblings("p").css("visibility", "visible");
});
Feel free to ask any questions in comments.
The following jquery code allows you to hide show the div's irrespective of the number of div's and also do not require additional id's to be created.
$("#container").on('click','h2',function(){//click on any h2 in container
//hide all div's having section id starting with section_
$("div[id^='section_']").hide();
//show the div which has index position equal to the clicked h2
$($("div[id^='section_']")[$(this).index()]).show();
});
See fiddle http://jsfiddle.net/3pmakwh4/

Hiding an element doesn't redraw page correctly in IE8 if the parent elements have a specific combination of display types

I have a problem when hiding/showing certain elements in IE8. If an element with display:inline-block has any child (including nested children) with display:block, then any child of that element has problems when hiding/showing. The page does not redraw correctly, and other elements position do not change to reflect the newly hidden/shown elements.
The minimal markup that shows the problem is below. In the example, when you click 'Clickable element', then the three divs directly below are hidden. However, the Footer Div does not change position - a large gap is left. If you do something to force a page redraw, such as selecting all text on the page, then the footer jumps to the correct position.
Something similar happens when showing the elements. Instead of the footer div being pushed to the bottom, it is overlapped by the newly shown elements.
<div style="display:inline-block">
<div>
<!-- Any number of other HTML elements -->
<div style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div>Footer Div</div>
<script type="text/javascript">
$('.clickable').click(function(){
$('.toggleable').toggle();
});
</script>
I've been trying to break this down for a fair while now, and I'm almost certain that I've got the minimal problem down (inline-block element followed by block element, and perform a show/hide on a child element). Has anybody encountered this before - or any suggestions on how to work around this?
This should do the trick. As the answer below states, inline-block isn't supported in older browsers and shows some quirky behaviour in certain versions of IE8. I've remembered this fix from something I did a while back, but I'm sorry, I can't give you a full explanation as to why this is happening. Anyhow, add a float to your main div, and clear your footer and, fingers crossed, it should work.
<div style="display:inline-block;float:left">
<div>
<!-- Any number of other HTML elements -->
<div class="div-2" style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div style="clear:left">Footer Div</div>
Seems to be working fine in here... But note that IE8 have some problems rendering jquery, and the css property 'inline-block' is not really supported by old browser versions (ie7, doesn't work, ie8, i'm not sure). Try adding the "zoom:1;" fix to the css of your tags that have the inline-block going on. Hope that helps somehow.

jQuery Simple Collapsible Div?

I am looking for the proper, simple, small code to do the following things:
Click on Element with Class Applied to it.
DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)
DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)
<div class="sitesection">
<p class="expand-one">Click Here To Display The Content <img src="images/arrow.png" width="5" height="7" /></p>
<p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.
I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.
$('.expand-one').click(function(){
$('.content-one').slideToggle('slow');
});
Demo: http://jsfiddle.net/Q4PUw/2/
I was looking at this and wanted a collapsible div that was already styled for me. Then I realized what I wanted was a single pane jquery-ui accordion.
<div id="collapse">
<h3>Collapse and Expand</h3>
<div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
collapsible: true,
active: false
});
</script>
http://jsfiddle.net/MB4ch/1/
I wanted to do this with multiple divs, each with their own trigger. Building on AlienWebguy's answer above:
HTML
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
Javascript
$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});
CSS
.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}
https://jsfiddle.net/Q4PUw/3767/
Bad idea to use accordion.
Better is to create your own collapsible block.
Example:
function InitSpoilBlock(idClicked)
{
$(idClicked).on('click', function(e){
var textArray = ['blind','slide'];//here you can add other effects
var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];
$(e.target).parent().children(".HiderPanel").toggle(randomEffect);
});
}
so when you write such html:
<div class="HiderContainer">
More
<div class="HiderPanel">
Spoiled block of html
</div>
</div>
and after page load you will call
InitSpoilBlock('.Hider');
all blocks will be possible to collapse and hide with random animation. Or you can use one exact animation also.

jQuery Accordion needs to ALWAYS show table in each div

I am using an accordion style menu to toggle the next div area when you click its parent h3 element.
$(document).ready(function() {
$('div.accordian-content> div').hide();
$('div.accordian-content> h3').click(function() {
$(this).next('div').slideToggle('medium')
.siblings('div:visible').slideUp('medium');
});
});
the code works fine with the following structure.
<div class='accordian-content'>
<h3>Some title</h3>
<div>content to be toggled</div>
</div>
The problem is that I'm trying to use a table in between the h3 and the next div and I want the table to always be shown, but when you put a table in there the parent h3 toggling breaks.
<div class='accordian-content'>
<h3>Covers </h3>
<table id='covers'>Table content </table>
<div>Ajax content</div>
</div>
Any advice would be greatly appreciated, as I have spent way to much time on this silly thing.
Replace next('div') with nextAll('div') and you should be fine. http://jsfiddle.net/VJCV9/
As far as know, tables dont slideUp() and also, should </div be </div>? $(this).next('div') needs to be .next(table).children(div)

HR tag stays hidden while containing div is shown with jquery

I have a hidden div which I reveal with the jquery fadein() method:
$("#panel").fadeIn("slow");
and here's the html:
<div id="panel" style="display:none;">
<hr/>
<p>text</p>
<button onclick="cancel()">cancel</button>
</div>
The text and the button within the panel is shown properly when the method is called but the hr stays hidden. Its display property is none according to firebug.
Why the HR is not shown together with the other elements? It's jquery 1.3.2
I copied your markup and jQuery, and it fades in fine for me. However, if I add the following CSS rule, it does not fade in correctly...
hr { display: none; }
So you must have this rule somewhere. Remove it and your fade will work as expected.

Categories