Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 6 years ago.
Improve this question
How would I utilize Javascript to show "pages" of testimonials - so that when clicking a link it shows one set of DIV's and hides the others, thereby allowing me to cycle through content using numbered links. I have attached my code of the basic design, I am just not familiar with how to use JS to actually make it function. In searching SOF all I can find is examples using Jquery scripts, but I do not have a jquery.
The objective is that when you click the "1" link in the top right corner only the blurbs with "1's" will show on the page, same with clicking the "2" link, all the 1's and 3's will disappear and only the blurbs with the 2's will show.
CSS
#charset 'utf-8';
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-color: #A8A8A8;
font-size:14px;
font-family: 'Open Sans', sans-serif;
}
box {
background-color:#FFFFFF;
width:950px;
height:400px;
margin-left:auto;
margin-right:auto;
}
.testimonialnavigation {
width:950px;
margin-left: auto;
margin-right: auto;
}
ul.testimonialpages {
list-style-type: none;
font-size: 16px;
font-weight: bold;
padding-right:30px;
}
.testimonialpages li a {
float: right;
color: #FFFFFF;
text-decoration: none;
text-align: center;
margin-left: 5px;
margin-right: 5px;
height:30px;
width:30px;
line-height:30px;
background-color:#C82633;
display:inline-block;
}
.testimonialpages li a:hover {
color: #FFFFFF;
background-color: #737373;
}
.testimonials {
clear:both;
width:875px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
background-color:#EDEDED;
min-height:50px;
border-radius: 15px;
padding:15px;
}
.testimonials:nth-of-type(odd) {
background-color:#D3D3D3;
}
.hidden {
display:none;
}
HTML
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Title</title>
<link rel='stylesheet' href='teststyle.css' />
</head>
<body>
<div class="box">
<div class="testimonialnavigation">
<ul class="testimonialpages">
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
<br><br>
<div class="container">
<div id="content1" class="testimonials">
<i>
111111 111111 111111111 11111111111
</i><br>
<b>
- 11111111111
</b>
</div>
<div id="content2" class="testimonials">
<i>
11111 111111 1111111 11111111 1111111111
</i><br>
<b>
- 11111111
</b>
</div>
<div id="content3" class="testimonials">
<i>
22222 22222222 222222 2222222 222222222
</i><br>
<b>
- 2222222
</b>
</div>
<div id="content4" class="testimonials">
<i>
2222222 222222 2222222222 222222 2222222 222222
</i><br>
<b>
- 222222
</b>
</div>
<div id="content5" class="testimonials">
<i>
333333 3333333 33333333 33333333 333333 3 33333333
</i><br>
<b>
- 33333333
</b>
</div>
<div id="content6" class="testimonials">
<i>
333333 33333333 333333 333333333333
</i><br>
<b>
- 333333333
</b>
</div>
</div>
</div>
</body>
</html>
hide
document.getElementById('id-of-some-element').style.display = 'none';
show
document.getElementById('id-of-some-element').style.display = 'block';
Consider to learn jQuery to do things easier.
You could even address the problem by using anchors (href="#some-name-in-the-page") and the CSS selector :active.
You can pass the id with an href like this:
Take me to my div
<div id="mydiv"><p>Hello</p></div>
OR:
Take me to my div
<h2 id="mydiv">My Div!</h2>
You can easily achieve that using JQuery toggle. This will hide and show based on your specified selector. It could be a class or id or an element.
Example:
<script>
$(document).ready(function(){
$("a").click(function(){
$(".testimonials").toggle();
});
});
</script>
<script>
document.getElementById('page1').addEventListener('click', function(){
document.getElementByClassNames('testimonials').style.display = 'none';
document.getElementById('content1').style.display = 'block';
});
</script>
Something like that would do the trick, obviously you need to either do something similar for each one, or refactor it to work for with each without breaking DRY principles.
Take a look at: http://www.w3schools.com/js/js_htmldom_eventlistener.asp
and: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Related
I'm been having a lot of trouble figuring out a way to update the text in a section without having to reload the page. What I would like the code to do is update the text and a picture in a section (id="section2" below) when you click on one of the tabs.
What I want the page to do when you click on one of the tabs is to load text (and in the future a .jpg too) from a local .txt file. As of right now, the changeText function updates the text but only when you manually type in the text.
From my code below this works:
$('#section-text').html("test of text1");
but what I would like to do would be to load text in from a .txt file called "text1.txt"
$('#section-text').html("text1.txt");
I'm just starting to venture into the web programming so I have very little experience with JavaScript and JQuery so most of the stuff that I've shown below is trial and error from other sites. I've tried many other methods that I've found online but with very little success. So far this is the closest I've got to my ideal solution, but I find if I just copy and paste my text it loses formatting.
Any help would be greatly appreciated. And if people have any suggestions on cleaning up some of the code it would also be very welcome.
Here is my HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Test Page">
<title>Test Page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function changeText(text){
if (text == 'Example 1'){
$('#section-text').html("test of text1");
$('#section-pic').html("images/slide1.jpg");
}
if (text == 'Example 2'){
$('#section-text').html("Change the text");
$('#section-pic').html("images/slide2.jpg");
}
if (text == 'Example 3'){
$('#section-text').html("Something new here");
$('#section-pic').html("images/slide3.jpg");
}
}
</script>
</head>
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li id="Example 1" onClick="changeText('Example 1');"><a>Example 1</a></li>
<li id="Example 2" onClick="changeText('Example 2');"><a>Example 2</a></li>
<li id="Example 3" onClick="changeText('Example 3');"><a>Example 3</a></li>
</ul>
</div>
<div id="section2" class="section2" align="center">
<div id="section-text" class="section-text">
<iframe src="des/text1.txt" style="overflow:hidden" width ="90%"; height="90%" seamless="seamless" scrolling="no" frameBorder="0"></iframe>
</div>
<div id="section-pic" class="section-pic">
<span class="Centerer"></span>
<img class="Centered" src="images/slide1.jpg" style="height:75%; width:90%"/>
</div>
</div>
</html>
The CSS:
<style>
#header {
background-color:#083266;
color:white;
text-align:center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
#section2 {
width:100%;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
height: 10cm;
}
.section-text {
width:60%;
float:right;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
text-align:center;
}
.section-pic {
background-color:grey;
width: 40%;
float:left;
text-align:center;
}
.Centerer {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Centered {
display: inline-block;
vertical-align: middle;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 10px;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
width = 100px
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
</style>
AJAX attempt:
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('GET', 'text1.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('page_content');
el.innerHTML = reader.responseText;
}
}
UPDATED - My Solution:
For those of you who run into the same problem as I did here is the solution I used. After a lot of searching and asking around I used the display option in my css file. So add the following to your css file:
.hidden { display: none; }
.unhidden { display: block; }
In my case I wanted to update some text and a picture with a click on each tab so I added the following script to my html:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function unhide(divID,divID2) {
$(".unhidden").each(function() {
$(this).removeClass("unhidden").addClass("hidden");
});
//change text
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
//change the images
var item = document.getElementById(divID2);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
and here is the html script that I used:
<div class="section2" align="center">
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li> Example 1 </li>
<li> Example 2 </li>
</ul>
</div>
<div class="section-text">
<div id="Text1" class="unhidden">
<p> Text for Example 1 </p>
</div>
<div id="Text2" class="hidden">
<p> Add your text here for Text 2 </p>
</div>
</div>
<div class="section-pic">
<div id="Pic1" class="unhidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic1.jpg" style="height:auto; width:auto"/>
</div>
<div id="Pic2" class="hidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic2.jpg" style="height:auto; width:auto"/>
</div>
</div>
</div>
There are bunch of things you would need to do. Following is a mockup that would help you understand how you can get the text from an external file. Since you are more looking at a configuration approach, I would recomment using an xml file instead of text ( but the choice is upto you ).
// Register click event for every 'li' element
$('li').click(function()
{
var response = '';
// grab the id of the 'li' for lookup
var value = $(this).attr("id");
$.ajax({
url: "https://url/xml/test.xml", // Check for the structure below
dataType: "xml",
success: function(data) {
xmlDoc = $.parseXML(data);
$(xmlDoc).find("id").each(function ()
{
if($(this).text() == value)
{
$("#section-text").text($(this).find("title").text());
$(".Centered").attr("src",$(this).find("title").text());
}
});
}
});
});
// structure of text file as xml
"<id>Example1<title>Text Of Example 1</title><img>images/example1Image.img</img></id><id>Example2<title>Text Of Example 2</title><img>images/example2Image.img</img></id>",
http://jsfiddle.net/gcfLso5s/4/
I would also recommend reading some articles on jquery and ajax to enhance the understanding on how it works.
Let me know if you got any questions.
You can load a text file Via AJAX request and can set the text.where ever you want to.
I implemented a jQuery functionality to open a close div on click. I set a plus sign in the div while unclicked; when the div is clicked, I want the plus sign to be changed as minus. However, I'm running into trouble doing that. This is what I've coded so far:
HTML:
<body>
<div id="wrapper">
<div id="content">
<div class="demo">
<h2 align="center">DASHBOARD</h2>
<h3 class="expand collapse-close" ">STPCODE NOT REGISTERED 10 <span></span> </h3>
<div class="collapse">
<p>List of unregistered user are here</p>
</div>
<h3 class="expand collapse-close">REGISTERED USERS IN DRAFT MODE 10 <span></span> </h3>
<div class="collapse">
<p>List of user in draft mode are here</p>
</div>
<h3 class="expand collapse-close">PAYMENT INITIATED FOR USERS 10<span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment initiated</p>
</div>
<h3 class="expand collapse-close"> PAYMENT RECIEVED FOR USERS 10 <span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment received</p>
</div>
<h3 class="expand collapse-close">PAYMENT DISAPPROVED FOR USERS 10<span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment disapproved</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
/* --------
The CSS rules offered here are just an example, you may use them as a base.
--------- */
* {
margin:0;
padding:0
}
/* --- Page Structure --- */
#wrapper {
margin:0 auto;
padding:15px 15% 8em;
text-align:left
}
#content {
max-width:70em;
width:70%;
margin:0 auto;
padding-bottom:20px;
overflow:hidden
}
.demo {
margin:1.5em 0;
padding:1.5em 1.5em 0.75em;
/* border:1px solid #ccc; */
position:relative;
overflow:hidden
}
.collapse p {
padding:0 10px 1em
}
.switch {
position:absolute;
top:1.5em;
right: 1.5em;
padding:3px
}
.post .switch {
position:static;
text-align:right
}
.post .main {
margin-bottom:.3em;
padding-bottom:0
}
.other li, .summary {
margin-bottom:.3em;
padding:1em;
border:1px solid #e8e7e8;
background-color:#f8f7f8
}
.other ul {
list-style-type:none;
text-align:center
}
/* --- Headings --- */
.expand {
padding-bottom:.75em;
background-color: #CFDEFF;
border:1px solid #FFFFFF;
}
.expand a {
color:#2A51A0;
}
.expand a span {
padding-left:100px;
}
.collapse-close span {
display:block;
float:right;
background:url(images/plus.png) center center no-repeat;
padding:10px;
}
#collapse-close {
display:block;
float:right;
background:url(images/minus.png) center center no-repeat;
padding:10px;
}
jQuery:
<!--//--><![CDATA[//><!--
$(function() {
$("#content h3.expand").toggler();
$("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
$("#content div.other").expandAll({
expTxt : "[Show]",
cllpsTxt : "[Hide]",
ref : "ul.collapse",
showMethod : "show",
hideMethod : "hide"
});
$("#content div.post").expandAll({
expTxt : "[Read this entry]",
cllpsTxt : "[Hide this entry]",
ref : "div.collapse",
localLinks: "p.top a"
});
});
//--><!]]>
Can anyone help me to change the plus sign to minus when I click on that panel? Conversely, a plus sign should appear when the panel is collapsed back.
Library/ scripts:
jQuery 1.4.2
javascript/expand.js
i am doing this in my code
function aMethod(){
$(function() {
$( "#expand" ).click(function() {
$( "#collapse" ).toggleClass( "collapse-close collapse-open");
});
});
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="demo">
<h2 align="center">DASHBOARD</h2>
<h3 class="expand collapse-close" onclick="aMethod();">STPCODE NOT REGISTERED 10 <span></span> </h3>
<div class="collapse">
<p>List of unregistered user are here</p>
</div>
use .toggleClass( className )
Refernce : http://api.jquery.com/toggleclass/
Like #Rajesh Kumar already said, you can use jQuery .toggleClass().
<div class="first"></div>
$("div").click(function(){
$(this).toggleClass('second');
});
Have a look at that fiddle
Another way would be working with .addClass() and .removeClass(). It's equivalent to .toggleClass().
You can watch this fiddle for a demo working with .addClass() and .removeClass().
<div class="first"></div>
$("div").click(function(){
if($("div").hasClass("first")){
$(this).removeClass("first");
$(this).addClass("second");
}
else{
$(this).removeClass("second");
$(this).addClass("first");
}
});
But I suggest you to use .toggleClass(). It's less code, which does the same, just easier and more clear.
Changes
#collapse-close {
display:block;
float:right;
background:url(images/minus.png) center center no-repeat;
padding:10px;
}
into
.collapse-open span{
background:url(images/minus.png) center center no-repeat;
}
and use jquery toggleClass method in your function/jquery code like :
.toggleClass('collapse-close collapse-open')
Implemented what you need without expand.js
Have a look, it might help:
<head>
<style type="text/css">
/* --------
The CSS rules offered here are just an example, you may use them as a base.
--------- */
* {margin:0; padding:0}
/* --- Page Structure --- */
#wrapper{
margin:0 auto;
padding:15px 15% 8em;
text-align:left
}
#content {
max-width:70em;
width:70%;
margin:0 auto;
padding-bottom:20px;
overflow:hidden
}
.demo {
margin:1.5em 0;
padding:1.5em 1.5em 0.75em;
/* border:1px solid #ccc; */
position:relative;
overflow:hidden
}
.collapse p {padding:0 10px 1em}
.switch {position:absolute; top:1.5em; right: 1.5em; padding:3px}
.post .switch {position:static; text-align:right}
.post .main{margin-bottom:.3em; padding-bottom:0}
.other li, .summary {margin-bottom:.3em; padding:1em; border:1px solid #e8e7e8; background-color:#f8f7f8}
.other ul {list-style-type:none; text-align:center}
/* --- Headings --- */
.expand{padding-bottom:.75em;background-color: #CFDEFF; border:1px solid #FFFFFF; }
.expand a{color:#2A51A0;}
.expand a span {padding-left:100px;}
.collapse-close span {
display:block;
float:right;
background-size: 20px;
padding:10px;
}
.collapse {
transition: 1s;
}
.plus {
background:url(http://png-2.findicons.com/files/icons/1007/crystal_like/256/plus.png) center center no-repeat;
}
.minus {
background:url(http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/panel/minus.png) center center no-repeat;
}
.display-none {
display: none;
}
.trigger{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.collapse-close span').click(function(){
debugger;
if(this.classList.contains('plus')){
this.classList.remove("plus");
this.classList.add("minus");
$(this.parentElement.parentElement).children(".collapse").removeClass('display-none');
}
else{
this.classList.remove("minus");
this.classList.add("plus");
$(this.parentElement.parentElement).children(".collapse").addClass('display-none');
}
})
$('.trigger').click(function(){
if(this.classList.contains('expand-all')){
$('.collapse-close span').each(function(){
this.classList.remove("plus");
this.classList.add("minus");
$(this.parentElement.parentElement).children(".collapse").removeClass('display-none');
});
this.classList.remove('expand-all');
this.classList.add('collapse-all');
$(this).html('[Collapse All]');
}
else {
$('.collapse-close span').each(function(){
this.classList.remove("minus");
this.classList.add("plus");
$(this.parentElement.parentElement).children(".collapse").addClass('display-none');
});
this.classList.remove('collapse-all');
this.classList.add('expand-all');
$(this).html('[Expand All]');
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="demo">
<h2 align="center">DASHBOARD</h2>
<div class='trigger expand-all'>[Expand All]</div>
<div class="ques-ans">
<h3 class="expand collapse-close">STPCODE NOT REGISTERED 10 <span class="plus"></span></h3>
<div class="collapse display-none">
<p>List of unregistered user are here</p>
</div>
</div>
<div class="ques-ans">
<h3 class="expand collapse-close">REGISTERED USERS IN DRAFT MODE 10 <span class="plus"></span></h3>
<div class="collapse display-none">
<p>List of user in draft mode are here</p>
</div>
</div>
<div class="ques-ans">
<h3 class="expand collapse-close">PAYMENT INITIATED FOR USERS 10<span class="plus"></span></h3>
<div class="collapse display-none">
<p>Total number of users who have their payment initiated</p>
</div>
</div>
<div class="ques-ans">
<h3 class="expand collapse-close"> PAYMENT RECIEVED FOR USERS 10 <span class="plus"></span></h3>
<div class="collapse display-none">
<p>Total number of users who have their payment received</p>
</div>
</div>
<div class="ques-ans">
<h3 class="expand collapse-close">PAYMENT DISAPPROVED FOR USERS 10<span class="plus"></span></h3>
<div class="collapse display-none">
<p>Total number of users who have their payment disapproved</p>
</div>
</div>
</div>
</div>
</div>
</body>
I'm trying to implement a tab navigation menu.
I found this fiddle example http://jsfiddle.net/S78Bt/3/ doing exactly what I want to do. However, I can't get the tabify to work.
Programmatically change tab using tabify jquery plugin
In the above question, I found the tabify function is not being maintained, so instead we have to type it out, I reckon I made a mistake in completely attaching the JS with my webpage since the buttons (tabs) don't respond at all.
Here's my code:
JS script:
<script>
(function(a){a.fn.extend({tabify:function(e){function c(b){hash=a(b).find("a").attr("href");return hash=hash.substring(0,hash.length-4)}function f(b){a(b).addClass("active");a(c(b)).show();a(b).siblings("li").each(function(){a(this).removeClass("active");a(c(this)).hide()})}return this.each(function(){function b(){location.hash&&a(d).find("a[href="+location.hash+"]").length>0&&f(a(d).find("a[href="+location.hash+"]").parent())}var d=this,g={ul:a(d)};a(this).find("li a").each(function(){a(this).attr("href", a(this).attr("href")+"-tab")});location.hash&&b();setInterval(b,100);a(this).find("li").each(function(){a(this).hasClass("active")?a(c(this)).show():a(c(this)).hide()});e&&e(g)})}})})(jQuery);
$(document).ready(function(){
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
$('#ulaa').tabify();
setActive($('#target'));
});
</script>
And here's the UL that I'm trying to put in tabs:
<ul id="ulaa">
<li class="active">abcd</li>
<li id="target" >asdbk</li>
<li>texte</li>
<li>foo</li>
<li>inserttexthere</li>
</ul>
<div class="contenta" id="a">
jQuery is a cross-browser…
</div>
<div class="contenta" id="bb">
The Prototype JavaScript…
</div>
<div class="contenta" id="c">
Ext (X-t) is a JavaScript…
</div>
That's it. I have all this in just the one HTML file. Is there something more I need to do?
Basically, on clicking a tab the link's class should change to 'active' and the previous one that already has 'active' should be removed (made class-less)
and then underneath the horizontal tabs a div should be shown corresponding to the ID and the href.
What's wrong with this code?
I put the following code in a page and uploaded it to my website and works exactly the way the fiddle works.
If you don't include jQuery in your header, you'll get a page that looks like yours.
CODE
<!DOCTYPE html>
<head>
<title>Limerick OneLimerick TwoLimerick</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body { font: 0.8em Arial, sans-serif; }
.menu { padding: 0; clear: both; }
.menu li { display: inline; }
.menu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.menu li.active a {
background: #eef;
}
.content { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 20px; width: 400px; }
</style>
</head>
<body>
<div class='mytabs'>
<ul id="menu" class="menu">
<li>Limerick One</li>
<li>Limerick Two</li>
<li>Limerick Three</li>
</ul>
<div id="description" class="content">
<h2>Limerick One</h2>
<p>
The limerick packs laughs anatomical
In space that is quite economical,
But the good ones I've seen
So seldom are clean,
And the clean ones so seldom are comical.
</p>
</div>
<div id="usage" class="content">
<h2>Limerick Two</h2>
<p>
Let my viciousness be emptied,
Desire and lust banished,
Charity and patience,
Humility and obedience,
And all the virtues increased.
</p>
</div>
<div id="download" class="content">
<h2>Limerick Three</h2>
Hickere, Dickere Dock,
A Mouse ran up the Clock,
The Clock Struck One,
The Mouse fell down,
And Hickere Dickere Dock.
</div>
</div>
<script>
$('.mytabs').tabs()
$( '.menu li a' ).on('click', function(){
$( '.menu li a' ).css('background-color', '#ccf');
$( this ).css('background-color', 'green');
});
</script>
</body>
</html>
I am trying to figure out why my scrollspy in bootstrap wasn't working. I found out that section tags are stacked and not working correctly with their child elements.
Chromes computed style (along with other browers) is as follows:
background-color: transparent;
color: #333;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 0px;
line-height: 18px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 940px;
But the data within the <section> is computed as:
background-color: transparent;
color: #333;
display: block;
float: left;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 317px;
line-height: 18px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
margin-top: 0px;
width: 780px;
If I comment out bootstrap.css (which I have not edited) the sections are how they should be. The only thing bootstrap does is that it sets section to block.
I wonder if my HTML could be causing the problem. My page layout is:
<body>
<div class="container">
<header>
<h1>HEADER</h1>
<nav>
<div class="subnav">
<ul class="nav nav-pills">
<li>Introduction</li>
<li>The Beginning</li>
...
</ul>
</div>
</nav>
</header>
<section id="overview">
<div class="span10">
<h2>Introduction</h2>
<hr class="full">
<p> text text text text </p>
</div>
</section>
<section id="begin">
<div class="span10">
<h2>The Beginning</h2>
<hr class="full">
<p> text text text text </p>
</div>
</section>
...
</div>
<script>..</script>
</body>
All sections are just stacked on each other 1px apart. What is bootstrap.css is causing this problem. This or my layout? I've edited out every variable with javascript styles, and it leads right to the bootstrap.css. Please help me.
update
I have written a simple page and it still doesn't compute the <section> tag right.
The answer to this is very simple but took me hours to figure out.
For each <section> tag you need to specify <div class="row"> before specifying <div class="span'somenumber'> and the section tag will compute correctly.
Possibly try <section id="overview" class="row">
I have created a menu using CSS and Javascript. When I click on a menu topic (Header) it gets toggled and shows the sub categories.
What I need it to do is.. when I click on any other menu headers the previously toggled (shown) sub category should untoggle (hide) and the currently active menu header should be toggled with its sub categories. How can I achieve this?
here is my code..
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
$(".toggleBox").hide();
return true;
});
});
HTML
now it is kind of OK, but there are some weird movements when I click on it. Here is my remaining HTML code.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="toggle.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td>
<h2 style="background-color:#DAD0D0;">NOKIA</h2>
<div class="togglebox">
<div class="content">
<center> NOKIA 8320 </center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">SAMSUNG</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
<h2 style="background-color:#DAD0D0;">SONY ERICSSON</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">ALCATEL</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
</td>
<td width="70%">
</td>
</tr>
</table>
</body>
</html>
CSS
h2 {
padding:10px;
font-size:10px;
color:#243953;
/* border: 1px solid #a9a9a9;
-moz-border-radius: 7px; /* Rounder Corner
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
text-align:center;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:10px;
margin: 0px;
}
.togglebox {
background-color:#F7F3F3;
border: 0px solid #a9a9a9;
/* Rounder Corner */
/* -moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
overflow: hidden;
font-size: 1.2em;
width: 196px;
clear: both;
margin-bottom:0px;
margin-top:0px;
}
.togglebox .content {
padding: 20px;
// slide toggle effect set to slow you can set it to fast too.
$(".togglebox").hide();
$(this).next(".togglebox").slideToggle("slow");
you have a capital 'B' in your hide code, $(".toggleBox").hide(); and you should swap the order of the actions hide all the "toggleboxes" (not the current one though, see below) first before triggering the H2's next slidedown
Example JSFIDDLE
edited as the above code means you can't toggle the current togglebox
// slide toggle effect set to slow you can set it to fast too.
var tb = $(this).next(".togglebox");
$(".togglebox").not(tb).slideUp();
$(tb).slideToggle("slow");
Because of later addition of more code to question;
Updated JSFiddle
I prepared a DEMO H E R E
Let me know if this suits your needs.