Develop Reference

Open page with everything hidden except what the URL says to open

How to link to a <div> on another page? was showing how to Link text to a div id, but what I am looking to do is write one web page that is linked from other pages but hides all content but what the link id says to show. o page1 link to infopage.html with content A visible and page2 link to infopage.html with content B visible, page3 link to infopage.html with content C visible and so on. using plain HTML, CSS and vanilla JavaScript. no jQuery please; trying to learn how this would tie together. hope I explained this well enough

One option is to use the :target selector.
You hide all the content in CSS with the use of display: none;. Then you can show the content when the link is clicked by using *:target { display: block; }
If you want to load content from other websites, you can either use PHP include or iframe. However you cant show only specific parts of the website that easily. You would need to overwrite its default styling with the same emthod mentioned above.
main > div {
display: none;
}
main > div:target {
display: block;
}
/* For Styling Pupose only */
nav ul {
display: flex;
list-style: none;
}
nav li {
margin: 0 10px;
}
<nav>
<ul>
<li>Content A</li>
<li>Content B</li>
<li>Content C</li>
</ul>
</nav>
<main>
<div id="A">This is Content A</div>
<div id="B">This is Content B</div>
<div id="C">This is Content C</div>
</main>

Here's a quick and dirty way to make that happen:
all the articles are hidden by default
window.location.href.split('#')[1] will get you the anchor name
classList.remove('hidden') removes the hidden class from the selected article
page1.html
<style> .hidden { display: none; }</style>
<div id="article1" class="hidden"><h2>Article 1</h2></div>
<div id="article2" class="hidden"><h2>Article 2</h2></div>
<p>Go to Article 3</p>
<p>Go to Article 4</p>
<script>
document.querySelector(`#${window.location.href.split('#')[1]}`).classList.remove('hidden');
</script>
page2.html
<style>.hidden { display: none; } </style>
<div id="article3" class="hidden"><h2>Article 3</h2></div>
<div id="article4" class="hidden"><h2>Article 4</h2></div>
<p>Go to Article 1</p>
<p>Go to Article 2</p>
<script>
document.querySelector(`#${window.location.href.split('#')[1]}`).classList.remove('hidden');
</script>

My Javascript is toggling all elements rather than just one

I have a list of questions and answers. I want a Plus/Minus icon to toggle, and when it is clicked, the answer appears below. I have written up the basic code, but when I click the Plus button for one of the questions, it toggles the answer to display on all of the questions rather than just that specific one. Please see the jsfiddle.
JS:
$(".plus").click(function(){
$(this).toggleClass("minus plus");
});
$(".plus").click(function(){
$(".answer").toggle();
});
How do I get it so that if I press the icon for Question 1, it only shows me Answer 1, and doesn't toggle the other icons?

Here's an updated JSfiddle: https://jsfiddle.net/ocm81sv8/7/
I would do your script like this:
JavaScript
$(".plus").click(function(){
var $this = $(this);
$this.toggleClass("minus plus");
$this.parent().next(".answer").toggle();
});
HTML
<div class="faq-block">
<ul>
<li class="question">
<p><span class="plus"></span>Question 1</p>
<p class="answer" style="display: none;">Answer 1</p>
</li>
<li class="question">
<p><span class="plus"></span>Question 2</p>
<p class="answer" style="display: none;">Answer 2</p>
</li>
</ul>
</div>
I removed having 2 click handlers for the same item and placed them into one call.
I also corrected your .plus elements to be span tags, as it's invalid for a block level element like div to be within p tags.

Updated Fiddle
You should replace <p><div class="plus"></div>Question 1</p> by <p><span class="plus"></span>Question 1</p> since <p><div></div></p> is not a valid HTML code, check the following post Putting <div> inside <p> is adding an extra <p>.
You should toggle the related answer with clicked .plus, so you could use closest('li') to get the parent question then .find(".answer") to target the related answer :
$(".plus").click(function(){
$(this).closest('li').find(".answer").toggle();
});
Instead of :
$(".plus").click(function(){
$(".answer").toggle();
});
Hope this helps.
$(".plus").click(function(){
$(this).toggleClass("minus plus").closest('li').find(".answer").toggle();
});
.faq-block ul, .faq-block ul li {
list-style-type: none !important;
}
span.plus {
display: block;
width: 30px;
height: 30px;
background-color: red;
float:left;
margin-right: 20px;
cursor:pointer;
}
span.minus {
display: block;
width: 30px;
height: 30px;
background-color: blue !important;
float:left;
margin-right: 20px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-block">
<ul>
<li class="question">
<p><span class="plus"></span>Question 1</p>
<p class="answer" style="display: none;">Answer 1</p>
</li>
<li class="question">
<p><span class="plus"></span>Question 1</p>
<p class="answer" style="display: none;">Answer 1</p>
</li>
</ul>
</div>

The fact that you're already using $(this) to get the currently clicked-on element, and yet still fail to use that to get the right target, makes me sad...
First things first. It is not valid to have <div> inside a <p> tag, causing JSFiddle to highlight these errors. It can be fixed by using <span> instead of <div>.
Now, as for doing the toggle, just navigate your way through the DOM:
$(this).closest(".question").find(".answer").toggle();
Navigates up the tree to the .question, then back down to the .answer, and toggles it.
https://jsfiddle.net/ocm81sv8/3/

https://jsfiddle.net/ocm81sv8/8/
$(".plus").on('click', function() {
$(this).toggleClass("minus plus")
.closest('li').find(".answer").toggle();
});
This will make sure if you click on a plus element, it will only toggle its own item, and then find the answer to show.

You need to use a more specific selector. Currently, you are using the class selector ".plus", which is going to be something common to all your questions. It is not a unique identifier. Your code will match all elements that fit your selector scope. To see what I mean, just enter $(".plus") in the chrome console on that page. It will return an array consisting of all the elements that match.
My suggestion is add a unique id to each question, so perhaps something like "question-0", "question-1" ... and so on, then use the selector "#question-X" to toggle it.
Hopefully that helps,
Good luck

Moving UL/LI elements using CSS3 animations

I want to create some animations by using CSS3 transitions.
Imagine the following UL/LI element:
<ul>
<li class="green" id="green" style="display: none;">Contents 1</li>
<li class="red" id="red" style="display: none;">Contents 2</li>
<li class="yellow" id="yellow" style="display: none;">Contents 3</li>
</ul>
It's important to know that those elements are positioned horizontally next to eachother (display: inline-block).
Now, when I click on a button, I show those elements, that isn't an issue.
This is done with the following HTML code:
Make contents 1 visible
Make contents 2 visible<br/>
Make contents 3 visible
When I want to put an animation on it, I can do it by adding a certain class to the element and the CSS would like this:
.animate { transition: all linear 5s; opacity: 1; display: inline-block; }
But now, let's mark the LI elements as absolute, so they are all displayed at the same location.
What I would like to have now as an animation is the following:
When I enabled item 2 it just fades in.
When I then enable item 1, it fades in, and at the same time, item 2 should start moving to the right until item 1 has taken up all the required space it needs.
But, to make it difficult, neither of the items has a fixed with, because the content of the UL LI elements is dynamiccly.
Here's a fiddle to better understand it:
http://jsfiddle.net/dw4Lz8qe/
So, I would like to fade an item is, but if there's already an item visible, the visible item(s) should start moving to the right until the required space for the fading in element is fully taken.
So, I do hope that this question was clear.
Kind regards,

Animating font-size may solve your problem:
ul li {
display: inline-block;
opacity: 0;
font-size: 0px;
transition: all linear 0.5s;
}
.green {background-color: green;}
.red {background-color: red;}
.yellow {background-color: yellow;}
.animate {
opacity: 1;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('#green').toggleClass('animate') ">Toggle contents 1</button>
<button onclick="$('#red').toggleClass('animate') ">Toggle contents 2</button>
<button onclick="$('#yellow').toggleClass('animate')">Toggle contents 3</button>
<ul class="padding: 0px; margin: 0px;">
<li class="green" id="green">Contents 1</li>
<li class="red" id="red">Contents 2</li>
<li class="yellow" id="yellow">Contents 3</li>
</ul>

As long as your <li> can have a fixed with, it works with css. Check your updated fiddle - you might want to use that to dive deeper into the matter. Problem is, you cannot transition between width: 0 and width: autoas this is not supported by any browser I know of.
http://jsfiddle.net/dw4Lz8qe/1/

Bootstrap 3 Menu, one button that toggles the tab and opens a dropdown?

I'm putting together a menu for a bootstrap website, learning this as I go but I'm lost in the world of javascript now.
Just say we have a tabbed nav menu typical to boostrap, when the tab is clicked it becomes active, and it also activates a drop down menu. I can get it to do one of either but not both.
Demo here
http://www.bootply.com/120851
Basically when "pane2" is clicked the dropdown should appear in pane2 content area.
I have included the link to toggle the dropdown separate from the menu just so you can see it works when "pane2" is selected/active. I hope I make sense here.
Thanks!

You can use the following code int pane2
<div id="pane2" class="tab-pane">
<div id="collapseTwo" class="tab-pane">
<div class="the-window">
<div class="dropDownTab">
<div class="taglist">do stuff</div>
<div class="taglist">do stuff</div>
<div class="taglist">do stuff</div>
</div>
</div>
</div>
</div>
and following css:
.dropDownTab {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 48px;
width: 72px;
text-align: center;
}

http://www.bootply.com/121226
Gone down a different road for the same effect with onclick link.

Best way to code an HTML/CSS/JS tab navigation system (no images)

I'm coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I'm finished its just a mess. I don't know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of the selected tab, I need to move it down 1px so it seamlessly blends with the sorting headers - I don't know whether to use margin: -1px or position: relative/absolute etc. I'd love some advice on a good way to code a tab system like this, so that it can be reused across the website!

Here's an example with CSS that makes it work:
HTML:
<body>
<div class="tabs">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1">
bla1
</div>
<div id="item2">
bla2
</div>
<div id="item3">
bla3
</div>
</div>
</div>
</body>
CSS:
.tabs ul {
list-style: none;
}
.tabs ul li {
float: left;
background: #eee;
border: 1px #aaa solid;
border-bottom: none;
margin-right: 10px;
padding: 5px;
}
.tabs ul li.active {
margin-bottom: -1px;
padding-bottom: 6px;
}
.tabInner {
clear: both;
border: 1px solid #aaa;
height: 200px;
overflow: hidden;
background: #eee;
}
.tabInner div {
height: 200px;
padding: 10px;
}
It even works without JS (to some degree). You'll still need some JS to move the 'active' class arround and also if you want fancy transitions.
See it in action here: http://jsfiddle.net/V8CK4/

I would use divs nested inside a list.
<ul>
<li>Tab1
<div> Content for Tab1</div>
</li>
<li>Tab2
<div> Content for Tab2</div>
</li>
<li>Tab3
<div> Content for Tab3</div>
</li>
</ul>
Then with css style ul li div to not show. I would use jQuery to show the child divs upon click of the parent li.
EDIT: Thanks to the comment... Note the li's would have to be styled inline so they do not break line after every one. Also set the li list-style to none.

In my opinion I would write it like this:
<div class="tabContainer">
<ul class="tabList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<em class="tabMessage">This is the message on the right.</em>
<div class="tabInnerContainer">
<div id="item1">
bla
</div>
<div id="item2">
bla
</div>
<div id="item3">
bla
</div>
</div>
</div>
This way will allow you to make it function al least to some extent without Javascipt, degrading nicely in browsers with JS turned off. Some of the classes could be removed if using CSS3 sleectors.

I assume the problem is to make the tab and the bar below it seem like one piece without using too much code.
What I have done before is to make the two elements I want to join overlap slightly (or not at all) and then put a third element (in the same color as both other elements) where the overlap is. This acts as a kind of patch.
Like this:
I. without patch
_________________
| |
| tab |
__|_________________|________________________________
| |
| menu bar |
|_____________________________________________________|
II. with patch
_________________
| tab |
|- - - - - - - - -|
___| patch |_______________________________
| - - - - - - - - - |
| menu bar |
|_____________________________________________________|
You will only need to use z-indexes to make this work properly. The patch may extend over the tab div it is contained in by using position: absolute and an adequately high value for top.
Update: demonstration
http://jsfiddle.net/7GJaW/

Like #Otis mentioned, nesting is a pretty good technique. I usually nest ul's
Link 1
Link 1 Item 1
Link 1 Item 2
However, if you are not trying to attempt to do a dropdown...