I have this slidetoggle and I want the style of the open toggle to be different then the closed ones.
By default all the faqtopics1 are set to border-radius: 5px; background-color: #f2ecec; when the div faqtext associated opens.
When the toggle opens, I want the style of faqtopics1 to be set to the "OnClick Style"
border-radius: 5px 5px 0 0;
background-color: #dedcdc;
I found out about the .css() Method and could somehow make something up (line 2 and 3):
$(".faqtopics1").click(function(event) {
$("div.faqtopics1").css({"border-radius":"5px", "background-color":"#f2ecec"});
$(this).css({"border-radius":"5px 5px 0 0", "background-color":"#dedcdc"});
$("div.faqtext").stop(true).slideUp(400);
$(this).next("div.faqtext").stop(true).slideToggle();
});
But it's not a total success as even when I re-click on a toggle to close it, the OnClick style remains. Is there a better way to make what I want ?
Also I want to apply the same principal even if I click on faqtopics2, faqtopics3 or faqtopics4 div. (cf the jsfiddle).
You can find my codes (css + query) on this jsfiddle
Thanks a lot for your help!
Something much easier:
Define your two states in CSS:
faqtopics1 {
border-radius: 5px;
background-color: #f2ecec;
}
.onclickstyle {
border-radius: 5px 5px 0 0;
background-color: #dedcdc;
}
Then in JS you just have to toogle the class:
$("div.faqtopics1").toggleClass("onclickstyle");
This means you have a clear separation between the exact style (in the css), and the dynamic toogle (in the javascript).
It may be easier to use addClass.
$this.addClass('active');
Then in your css
.faqtopics.active{border-radius:5px 5px 0 0; background-color:#dedcdc;}
You can give all of your "FAQ topics" a shared class .faqtopics and then unique id's #faqtopic1 #faqtopic2 if you need to style them a bit differently.
try this,
$('faqtopics1').attr('class','newClassName');
I am trying to find out if there is a way to alternate content line separator colors if possible.
For example:
The issue is that it has to be something automatic, so I'm assuming javascript would probably be required, but I can't find anything like this. I know there is some things that show you had to alternate if you have something like this. I say it has to automatically change because I'm using wordpress so one single line/snippet of code will be entered and something like javascript will need to automate the process. Any idea's?
You can use <hr /> elements between paragraphs as separators and style their colors with setting border CSS property.
CSS :
body{
text-align:center;
}
hr{
width:80%;
border-radius:5px;
}
hr:nth-of-type(1){
border: 4px solid red;
}
hr:nth-of-type(2){
border: 4px solid yellow;
}
hr:nth-of-type(3){
border: 4px solid green;
}
Screenshot :
Example :
JSFiddle
Here's something for starters: http://jsfiddle.net/3wGBb/
Take a look if your required browsers support nth-of-type CSS3 selector: http://caniuse.com/css-sel3.
I'm using Foundation 4 Joyride plugin but I need it to start (and re-start) once a user clicks a certain button on my UI, but I'm not being able to do so. By following the code presented on Zurb's site I'm only able to run it when the site first runs.
The docs for Joyride are here:
http://foundation.zurb.com/docs/components/joyride.html
and my init code is here
$(document).foundation().foundation('joyride', 'start', {template : { // HTML segments for tip layout
link : ' ',
timer : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
tip : '<div class="joyride-tip-guide" style="background: white; color: black; margin-top: -27px; margin-left: 2px; border-top: 1px dashed #c1c1c1; width: 100%; max-width: 457px;"></div>',
wrapper : '<div class="joyride-content-wrapper" style="background-color: white; color: black; padding: 4px; "></div>',
button : ''
}});
I bumped up against this as well. What you need to do is wrap the tag inside of a with an ID, and then call the joyride start command against that.
For example, the markup might look like this:
<div id="joyrideDiv">
<ol class="joyride-list" data-joyride>
<li data-id="joyridedElement"><p>Here's the explanation</p></li>
</ol>
</div>
And then you can start just that joyride by calling foundation (this is key) against that div only. The call would look like this:
$("#joyrideDiv").foundation('joyride', 'start');
Note that you're passing the ID of the wrapper div, not the ID of the element. I had to poke around in the source to figure that out.
You can also just launch joyride if you set the autostart property to true. To make sure you clear all previous joyride tours, if you switch between a few tours, you can clear the previous tours by calling the destroy function.
jQuery(window).joyride("destroy");
jQuery("#ot-introduction").joyride({autoStart: true});
jQuery is destroying me this week. I'm using fadeIn via jQuery on my portfolio site (http://www.codeisdna.com) to open up a section once it's clicked. Here's the HTML code I'm using:
<div class="project first project_name">
<div class="title">
Project Title!
<div class="date">2012</div>
</div>
<a class="expand" title="Click to expand the project." href="#project_1">Project Title!</a>
</div>
Which opens up a tab:
<div id="project_1" class="project_full pname"></div>
Using this js:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
});
EDIT: Here is the CSS code for .project_full (the expanded tab -- the CSS code for .project is irrelevant):
.project_full {
display: none;
margin-top: 20px;
width: 100%;
max-height: 450px;
padding: 20px 0px;
text-align: center;
background: url(../img/code.jpg) top center no-repeat fixed #293134;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
color: #fff;
overflow: hidden;}
.project_full .wrapper {position: relative;}
I've tried assigning a fixed height to a parent div, e.PreventDefault() doesn't work (I'm using anchor based tabs, so nothing of that sort will work), and so on. The page jumps on the first click and with each successive click. I know it jumps due to the missing content once the div is unhidden and "rehidden."
I'm wondering if HTML5 data attributes would remedy this? But then again, why would it as the anchor would still exist, albeit it being blank (#).
Hopefully someone with a lot more JS experience can help me!
Either change your handler adding preventDefault
$(".project").click(function(e) {
e.preventDefault();
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
Or change your a tag href attribute to be something like 'javascript:'
Or replace a tag with say span and let your click handler remain unchanged.
Or add name attribute to a tag (<a name='project_1'></a>) in right place as it is scrolling to this tag or beginning of the page as there is no ancor with corresponding name
I'd like to toggle a <div>, but my requirement is that it must work with javascript turned off. I would like to select a hyperlink that states "modify search" and the div that contains the search criteria displays.
I've found a TON of demos using jQuery, but they all require javascript enabled. Any assistance is appreciated.
Here you go, skipper! (edit — updated for science)
HTML:
<label for=cb>Click Here</label>
<input type='checkbox' style='display: none' id=cb>
<div>
Hello. This is some stuff.
</div>
CSS:
input:checked + div { display: none; }
edit — an additional note: display: none will cause certain browsers (IE) to pay no attention to the <input> checkbox. Instead of hiding it with the display CSS attribute, you can "move" it offscreen with something like position: absolute; left: -10000px;.
The <details> element does what you ask without any CSS or JavaScript applied.
It is of course not a div, so it doesn't answer your question literally, but I read your requirement being having some content you wish to conditionally reveal or conceal.
The <details> creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.
Unfortunately browser support for <details> is less than perfect, IE and Edge currently having no support at all. Edge status is Under Consideration. Development of IE is stopped so it will never gain support.
Here is the simple example follow this and you will be able to create toggle using css without any JAVASCRIPT and JQUERY. You can also add animations using css without JQUERY. CSS3 is AWESOME! :)
.box{width:200px;
height:0;
background:red;
transition:all 0.4s linear;}
input:checked ~ .box{height:220px;}
<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle"> CLICK ME </label>
<div class="box"> </div>
You can't toggle on clicks without javascript. End.
Update:
If you can use CSS 3 selectors, you'll have to change your DOM structure and use CSS 3 selectors without a library that covers old browsers which are probably a lot more common than users with javascript off, You can usee #pointy answer with :selected.
So I would say, practically it's still impossible...!
For a little more polished version of the accepted answer, a common practice is to combine a hidden checkbox + label to be able to have a clickable label on screen that maps to a hidden backing value that is available to both JavaScript (.checked) and to CSS (:checked)
<input type='checkbox' id='css-toggle-switch' checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>Error Details</label>
<div class='css-toggle-content'>
<pre><code>Unexpected StackOverflow</code></pre>
</div >
By putting our checkbox first, we can drive CSS decisions based on the :checked selector. We can grab subsequent elements with the adjacent sibling select + or the general sibling selector ~
/* always hide the checkbox */
.css-toggle-switch { display: none; }
/* update label text to reflect state */
.css-toggle-switch + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
/* conditionally hide content when checked */
.css-toggle-switch:checked ~ .css-toggle-content { display: none; }
/* make the label look clickable */
.css-toggle-switch + label {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Working Demo in jsFiddle & StackSnippets
.css-toggle-switch { display: none; }
.css-toggle-switch + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
.css-toggle-switch:checked ~ .css-toggle-content { display: none; }
.css-toggle-switch + label {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* just some styles to make the demo a little more pleasant */
.btn {
padding: 5px 10px;
background: white;
border: 1px solid grey;
border-radius: 3px;
width: 130px;
display: inline-block;
text-align: center;
}
.btn:hover {
background: #e6e6e6;
-webkit-box-shadow: inset 0 -1px 0 #dddddd;
-moz-box-shadow: inset 0 -1px 0 #dddddd;
box-shadow: inset 0 -1px 0 #dddddd;
}
.panel {
padding: 15px;
background: #ffe06d;
border: 1px solid #d69e01;
border-radius: 3px;
}
pre {
padding: 5px;
margin-bottom: 0;
background: #eaeaea;
border: 1px solid grey;
}
<div class="panel">
<input type='checkbox' id='css-toggle-switch'
checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>
Error Details
</label>
<div class='css-toggle-content'>
<pre><code>Unexpected StackOverflow</code></pre>
</div >
</div>
About three years late to the party, but I found this when I was looking to do the same thing, for a mobile menu, and subsequently found a very good solution, so I thought I'd post it for whoever else comes a-hunting.
The basic idea was from this article: http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800. I think
I've used a slightly simpler approach (stumbled on while setting it all
up). This hides / displays the navigation, by clicking the Menu button.
In the CSS, nav is set as "hidden" and nav:target is set to display. The page has two menu buttons, using the same image, both have class menubutton, absolute position in the same place.
menbuttonON has index 1000, sits outside nav in the html menubuttonOFF has index 1001, but sits inside nav, so it's invisible at first
In the HTML, clicking menubuttonON links to nav, which is then target, so
it displays. Inside that nav is menubuttonOFF, with a higher z-index
than menubutton ON, so that's on top now. Clicking menubuttonOFF links
back to menubuttonON, so nav isn't the target, and disappears, taking
menubuttonOFF with it.
Simplified CSS (without site-specific formatting):
nav {display: none;}
nav:target {display: block !important;}
.menubutton { position: absolute;
text-align: right;
top: 0;
margin-top: 14%;} /* This margin puts it below the header logo */
.menubuttonON {z-index: 1000;}
.menubuttonOFF {z-index: 1001;}
HTML
<header> <!-- logo here --> </header>
<div class="menubutton menubuttonON" name="buttonON"><img src="../Images/menubutton.png">MENU</div>
<nav id="nav" name="nav">
<div class="menubutton menubuttonOFF"><img src="../Images/menubutton.png">CLOSE</div>
<ul> <!-- all the navigation stuff --> </ul>
</nav>
You can see it working here: http://www.thewritersgreenhouse.co.uk/storyelements_resources/storyelements.htm.
What you ask is impossible without JavaScript. (Or, as #Pointy has pointed out, CSS3 selectors.)
You will have to modify your requirements, or better yet, just display the form by default and hide for JavaScript users (if necessary). Your page can work for everyone, and have unimportant features disabled for those that cannot use them.
No Javascript, no toggling. There are some pseudo CSS3 methods, but if you have to support JS off, you're certainly not supporting CSS3.
As others have said, you must use JS to achieve toggling of divs. If you want your website to work with javascript disabled, you need to design your website to fail gracefully when javascript isn't available. In other words, your website should NOT rely on JavaScript to function. Ex: AJAX forms should fall back to HTTP submit, etc.
You can't do it without using either Javascript or sending another request.
If you can live with the extra request (that is, an added page load is OK), then the most straightforward solution is to point the link to the current URL, but add a query string parameter, e.g. http://example.com/current-page?showsearch=1. Then, on the server, check if the showsearch parameter is set, and if so, initialize the search div to be visible.
Of course you will have to take care that the rest of your page state survives the request; you may have to use a form to be able to carry over any data the user may have entered, and this most likely means your link can't be a link, but has to be a button (because links cannot trigger form submits without Javascript).
The way to make this work with JS disabled is have the hyperlink have some href that accomplishes the task you desire - like:
/the/original/url?advanced-search=true
where the web server delivers different content when ?advanced-search=true is there. if JS is enabled, the jquery code you've researched should just cancel the original action.