We Keep Coding

replacing and hiding gridcontainers

This is what I have:
I have a gridcontainer with three cells where one cell contains three buttons. Each button displays an image below the container.
My javascript code is supposed to make the image disappear if a button is pressed twice butdoes not do so atm. The only way to make it disappear is to either press another picture hence replacing it with a new pic or reload the page.
This is what I want to do:
Instead of replacing and hiding images, I want to replace and hide gridcontainers. So instead of buttons showing pictures they will show a couple of cells with a mix of text and images. The content and layout on this will change when a new button is change, and will totally disappear when the same button is pressed twice. Is this doable.
This is my current javascript:
function changeImage(element){
if(document.getElementById('imageReplace').src==element){
document.getElementById('imageReplace').src="";
} else{ document.getElementById('imageReplace').src=element; }
it is activated by this html:
<div class="cell"><h2>Top reasons you should have a digital self
defense</h2>
<button class="infobutt"
onclick="changeImage('survcap1.jpeg');">Intellectual
freedom</button>
<button class="infobutt"
onclick="changeImage('survcap2.jpeg');">protect vulnerable
groups</button>
<button class="infobutt"
onclick="changeImage('survcap3.jpeg');">Take control over your
life</button></div>"
and correponds further with this html (Situated outside and below the container, also below main tag):
<img src="" alt="Images" id="imageReplace"/>
What is wrong with my current code and how can I improve it to suit my purpose?

SlideToggle closes when Filter is chosen

Info:
I've added a button on my homepage, which triggers a div to expand. The div shows 3 different filters, which you can choose.
The problem is:
After choosing the first filter, the div closes again. To choose the 2nd and 3rd filter, you got to press the button again to expand the div. And the problem happens again when clicking on the 2nd filter.
Question:
How can I prevent closing of my div, while choosing filters?
My code:
$(document).ready(function() {
if($(window).width()<768) $("#button-opl").on('click',function(){
$("#views-exposed-form-attraktioner-block").slideToggle();
});
});

how to know which 'a href' link was clicked from previous webpage?

I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.

Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});

Open 1 modal with two different links

So I have a page, with a modal. Now I have a table on that page. I want to include a link in each row of the table that opens that same modal, and then put different content in it using jQuery.
The problem I'm having is in the modals. When I give 2 links the id code, and do the following in jQUery:
$(document).ready(function()
{
$("#code").click(function()
{
$("#CodeModal").modal('show')
});
});
Only the first link opens the modal.
I have also tried data-toggle, but that resulted in no links being able the open the modal.
Is there a way to make this possible? If so, how to do it?
Thanks.

Id must be unique. You can assign the same class to the links and do this:
$(".code").click(function()
{
$("#CodeModal").modal('show')
});

Bootstrap nested tab not displaying until being re-selected

I am designing an admin panel for my application using nested tabs. Here is a basic diagram of how the tabs are set up.
Initially Active and Visible
-1a Initially Active and Visible
-1b Inactive
-1c Inactive
Inactive
-2a Initially Active but NOT Visible
-2b Inactive
-2c Inactive
2a is not visible at first because its parent(2) is not active however 2a does have the tag:
<li class='active'>
When I click on tab 2, tab 2a appears to be active, but the tab-pane is empty. Looking at the page source shows that there is data in the tab-pane for 2a. In order to see it I must click on tab 2b, then click back to tab 2a. My first thought was to remove .active from 2a. This then requires the user to click on 2a to active it instead of de-activating then re-activating to display the content. What I want to happen is for 2a to be immediately visible when tab 2 is clicked. Sorry for the long explanation. Below is the code if that is easier for you to sort through.
I placed the HTML code in this jsfiddle because it was too long to include in the post.
http://jsfiddle.net/vhFFf/
EDIT:
Here is a working fiddle that accurately shows the issue I am trying to correct:
http://jsfiddle.net/52VtD/4862/
Be sure to drag the Result pane as wide as possible so that the content displays as intended. When you click the "Users" button in the most left menu, the initially active pane content is not displayed. You must click "add user" or "trash" then click back to "Users" to see that panes content.

I think you have to manually add the active class to the pane to make it active when you switch to that tab <div class="tab-pane active" id="user"> I updated you FIDDLE
that was the simplest solution I could think of hope it helps.