I am designing my FAQs page for that i have used questions as links and answers in paragraph tags. I want to show answer of its respective question when its question link is clicked, i have coded till now and its working perfect.
My problem is that i have some answers where i have used links as well. so when i click such question link it shows its answer (Fine) but when i click the link in answer it hides the whole answer which i don't want. i want to open that link in new tab, and when i click question again it should hide that answer.
HTML
<div class="pageContents">
<div class="list_Q" id="Q3">
<a class="que" href="#">
<h5><strong>Q) </strong>
How can I test EPX before I buy it?
</h5>
</a>
<p id="ans-pop"><strong>A) </strong>Demo link for EPX is <a target="_blank" href="http://google.com/" class="link_read">Here </a></p>
</div>
<div class="list_Q" id="Q15">
<a class="que" href="#">
<h5>
<strong>Q) </strong>How can I create Endicia account I'd?
</h5>
</a>
<p id="ans-pop"><strong>A) </strong>Visit <a target="_blank" href="http://www.endicia.com/" class="link_read">Endicia</a> for
creating Endicia account.
</p>
</div>
</div>
CSS
#ans-pop {
display: none;
}
.list_Q {
BORDER-BOTTOM: #333333 1px dotted;
MARGIN-BOTTOM: 5px;
}
.list_Q H5 {
PADDING-BOTTOM: 5px;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
MARGIN-BOTTOM: 0px;
BACKGROUND: #ededed;
COLOR: #d80d0d;
FONT-SIZE: 12px;
FONT-WEIGHT: normal;
PADDING-TOP: 5px;
}
.list_Q P {
PADDING-BOTTOM: 5px;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
COLOR: #333333;
FONT-SIZE: 12px;
PADDING-TOP: 5px;
}
Jquery
$('.list_Q').click(function () {
var status = $(this).attr('id');
var fix = '#' + status + ' #ans-pop';
if ($(fix).is(":not(:visible)")) {
$(fix).show(500);
} else {
$(fix).hide(500);
}
return false;
});
fiddle
Just check if the target is not a tag like this:
if ($(event.target).is('a')) {
return;
}
http://jsfiddle.net/P45bE/129/
Update
In the below fiddle the code close the opened question while it show the clicked.
Hide the opened answer using $('.ans-pop:visible').hide(500);
Important I replaced the id="ans-pop" to class="ans-pop" because id attribute must be unique. Especially in this case.
http://jsfiddle.net/P45bE/132/
Add a class on your link and stop the event propagation on the click of your link.
<a target="_blank" class="test" href="http://www.endicia.com/" class="link_read">Endicia</a>
$('.test').click(function (e){
e.stopPropagation();
});
DEMO
I think you want this, try to replace your code with this
$('.list_Q a').click(function (){
var status = $(this).parent().attr('id');
Use e.stopPropagation(); in the anchors you want to click:
$("a[href!=#]").click(function (e) {
e.stopPropagation();
});
Demo
I would do it like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<h5><strong>Q) </strong> Question number 1 </h5>
<div id="answer_1" class="answer">
<p><strong>A)</strong> Answer, with an <a target="_blank" href="http://google.com/" class="link_read">external link</a>.</p>
</div>
</div>
<div class="faq">
<h5><strong>Q) </strong>Here's another question</h5>
<div id="answer_2" class="answer">
<p><strong>A)</strong> Another answer, with another <a target="_blank" href="http://google.com/" class="link_read">external link</a>.</p>
</div>
</div>
$('.question').on('click', function(){
var href = $(this).attr('href');
$(href).toggle();
return false;
});
.answer {
display:none;
}
Seeing as you're using links, I've added the ID of the answer as the href so the questions and answers are linked, even without the JS.
In jQuery, the href is then grabbed from the link and used to select and show/hide the answer div
External links work as they normally would, as the jQuery code doesn't affect them in any way
Related
This question already has answers here:
Clicking anchor should execute javascript not go to new page
(5 answers)
Closed 5 years ago.
stopPropagation works but cannot stop href being executed on child click, is there a way to make parent anchor do not execute it's href on child element is clicked(stopPropagation/bubbling)?
Here is my markup:
<div id="parent">
<h5>Parent</h5>
<a id="childAnchor" href="https://www.google.com/" target="_blank">
<h5>Child anchor tag</h5>
<div id="grandChildAnchor">
<h5>Grand Child div tag</h5>
</div>
</a>
</div>
Here is jsfiddle where I am redirecting on anchor click: https://jsfiddle.net/gchc9Ldb/
Here is stackoverflow code snippet but the redirect (target="_blank") is not happening correctly. So check the above jsfiddle link rather below code snippet.
$('#parent').click(function() {
console.log('#parent clicked');
})
$('#parent a').click(function() {
console.log('#parent > anchor clicked');
})
$('#parent a div').click(function(e) {
e.stopPropagation();
console.log('#parent > anchor > clicked');
})
h5 {
text-align: center;
color: white;
margin: 0;
}
#parent {
width: 200px;
height: 200px;
padding: 10px;
background-color: green
}
a {
display: block;
padding: 50px 10px;
background-color: blue
}
#grandChildAnchor {
padding: 25px 0;
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<h5>Parent</h5>
<a id="childAnchor" href="https://www.google.com/" target="_blank">
<h5>Child anchor tag</h5>
<div id="grandChildAnchor">
<h5>Grand Child div tag</h5>
</div>
</a>
</div>
EDIT:
I don't want to run return false on my anchor tag's href, I still need href to work but not when the anchor tag's child is clicked. e.stopPropagation will not work for me. Hence, it's not a duplicate question as most assumed.
You need to use e.preventDefault();
$('#parent a div').click(function(e) {
e.preventDefault();
console.log('#parent > anchor > clicked');
})
e.stopPropagation() stops the event from bubbling up the event chain.
e.preventDefault() prevents the default action the browser makes on that event
Here is the working link to JSFIDDLE
I am attending an entry level HTML/CSS/JS course and our first assignment is to make a simple website about ourselves. We need to have a horizontal menu that when clicked displays certain information. For example, clicking "description" should display a short paragraph describing ourselves. From what I've researched it seems that my answer lies with using JQuery but I don't believe he expects us to know that nor utilize it this early. Is there another option that I may not be seeing?
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Jeremy Ortiz</title>
<div id="header">
<h1>A Little About Jeremy Ortiz</h1>
</div>
</head>
<body>
<img src="hwpic.jpg" alt="Me">
<div id="content">
<div id="nav">
<h2>Navigation</h2>
<ul>
<li><a class="selected" href="">Description</a></li>
<li>A form</li>
<li>Course List</li>
<li>Table</li>
<li>Contact Information</li>
</ul>
</div>
</body>
</html>
#header {
padding: 10px;
background-color: #6CF;
color: white;
text-align: center;
}
img {
position: absolute;
right: 7px;
bottom: 148px;
z-index: -1;
}
#content {
padding: 10px;
}
#nav {
width: 180px;
float: left;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
My answer will assume your goal is to accomplish this task using basic Javascript instead of changing pages by navigating the user using the <a> elements. I understand that there are more efficient methods of performing this but I chose to present the information in a hopefully simple easily readable manner.
The way I would accomplish this is by changing your <a> elements:
<a class="selected" href="">Description</a>
To button elements and add the 'onclick' property with the function to call when the button is clicked:
<button onclick="displayDescription()">Click Me</button>
Now we need to create the elements that will be displayed upon clicking the button. For this we create some <div> other container that we can hide until the corresponding button is clicked.
<div id="description" style="display: none;">
Displayed when the description button is clicked.
</div>
Note** For every button we will need to create a <div style="display: none;"> to hide the information until its corresponding button is clicked.
Now we can create our Javascript function:
function displayDescription() {
var x = document.getElementById('description');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Note once again that in this method each Javascript function will map to a button in the same way each hidden will map to the same button.
If you need more help I recommend checking out w3schools and specifically for this problem here is a link to what you need to accomplish with your assignment.
http://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
I hope this was helpful as I just wrote this during one of my college classes I will probably formalize my answer more at a later time today.
please help me for remove or hide my #id on url browser.
example:
my menu1 target on "#p1"
my site "mysite.com/index.htm"
when i click menu1 on my browser will like this "mysite.com/index.htm#p1"
i need my id not show on url browser just "mysite.com/index.htm" not like this "mysite.com/index.htm#p1"
#p1:target { background: red;}
#p2:target{ background: green;}
#p3:target{ background: blue;}
#p4:target{ background: yellow;}
#p5:target{ background: coral;}
#p6:target{ background: skyblue;}
ul{list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a{ display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover {
background-color: #111;
}
<div id="menu">
<input type="checkbox" id="tbl-menu"/>
<label for="tbl-menu"><img src="drop.png" height="40px" width="40px" alt=""></label>
<nav class="nav">
<ul class="tombol">
<li class="tombolmenu">
<a class="t1" href="#p1">Menu1</a></li>
<li><a class="t2" href="#p2">Menu2</a></li>
<li><a class="t3" href="#p3">Menu3</a></li>
<li><a class="t4" href="#p4">Menu4</a></li>
<li><a class="t5" href="#p5">Menu5</a></li>
<li><a class="t6" href="#p6">Menu6</a></li>
</ul>
</nav>
</div>
<!-- My page target -->
<div id="p1"> Page1 </div>
<div id="p2"> Page2 </div>
<div id="p3"> Page3 </div>
<div id="p4"> Page4 </div>
<div id="p5"> Page5 </div>
<div id="p6"> Page6 </div>
I know this question is starting to be old in Internet years but I thought I'd share my solution (which is loosely based off Janmejay Agrawal's).
It basically replaces the standard behaviour of a hyperlink and creates a smooth scrolling to the desired element.
This code uses "vanilla" JS and should work with most web browsers.
//Get all the hyperlink elements
var links = document.getElementsByTagName("a");
//Browse the previously created array
Array.prototype.forEach.call(links, function(elem, index) {
//Get the hyperlink target and if it refers to an id go inside condition
var elemAttr = elem.getAttribute("href");
if(elemAttr && elemAttr.includes("#")) {
//Replace the regular action with a scrolling to target on click
elem.addEventListener("click", function(ev) {
ev.preventDefault();
//Scroll to the target element using replace() and regex to find the href's target id
document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
});
}
});
Should this code not be correct, please feel free to point it out !
There are several ways to do it, and my favourite is to make a custom function to scroll to in page link instead of relying on browser for it.
Like this
$("a[href^='#']").click(function(e){
e.preventDefault();
var elem = $($(this).attr('href'));
/* check for broken link */
if(elem.length)
$(window).animate('scrollTop' , elem.offset().top)
})
In addition of hiding '#id' from url it'll also animate scrolling.
Hope It'll help.
Is it possible to change a link to "active" without add/removing a class? The problem i´ve got is, that my other script will not work if the "a"-tag will be changed for example to "a.active".
So this way works for the link, but not for my other script ;(, because a class will be add and remove.
<script>
$(function(){
$('.mydiv a').click(function(){
$('.mydiv .active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Can anybody help me?
UPDATE 2
Thats the script I work with:
http://jsfiddle.net/7n2d4b44/2/
Use data-* attributes to hold data, don't use class names as data. You can use the jQuery .data method to get the value of a data-* attribute.
var sliding = $('.sliding_div');
var divWords = $('.sliding_div p');
$('.links a').click(function () {
//pass .data the name after the `data-` part in the attribute name
var c = '.' + $(this).data("filter"); // get name to filter classes and make it as a CSS selector
divWords.hide().filter(c).show(); // hide all words,
// filter to get the ones with class like the clicked link
// show the filtered ones
//You could move this to its own handler
//$(".links a.close).click(...)
c === '.close' ? sliding.hide() : sliding.show();
// if c is .close show the sliding_div else hide it
$(".links .active").removeClass("active");
$(this).addClass("active");
});
.links {
width: 60px;
float: left;
}
.sliding_div {
padding:10px;
width: 200px;
float: right;
background-color:#ccc;
display:none;
}
.sliding_div div {
display:none;
}
.active{
color:#F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
<a href="#" data-filter='one'>Link 1</a>
<a href="#" data-filter='two'>Link 2</a>
<a href="#" data-filter='three'>Link 3</a>
<a href="#" data-filter='close'>Close</a>
</div>
<div class="sliding_div">
<p class='one two three'>House</p>
<p class='one two three'>Cat</p>
<p class='one'>Dog</p>
<p class='three'>Car</p>
<p class='one two'>Man</p>
</div>
You could use the CSS pseudo-class I think like:
a:active { color: lime }
More info CSS :active pseudo-class
The $(this).addClass('active'); should append so the element should have 2 classes. The other class should not be removed. You can double check.
In your case, it could be that your function to access the other class is not coded correctly
I made a few changes, but you should now be able to add your code to use the active class, without worrying about this bit...
css
.links {
width: 60px;
float: left;
}
.sliding_div {
padding:10px;
width: 200px;
float: right;
background-color:#ccc;
}
.sliding_div p {
display:none;
}
html
<div class="links">
<a href="#" data-link='one'>Link 1</a>
<a href="#" data-link='two'>Link 2</a>
<a href="#" data-link='three'>Link 3</a>
Close
</div>
<div class="sliding_div">
<p class='one two three'>House</p>
<p class='one two three'>Cat</p>
<p class='one'>Dog</p>
<p class='three'>Car</p>
<p class='one two'>Man</p>
</div>
Javascript
var sliding = $(".sliding_div");
var divWords = $(".sliding_div p");
$(".links a").click(function (e) {
e.preventDefault();
divWords.hide();
sliding.find("." + $(this).data("link")).show();
});
jsfiddle example...
http://jsfiddle.net/7n2d4b44/7/
I am using following code.I want to open different content on click.
<style>
#overlay_form {
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop {
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
Following javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//open popup
$("#pop").click(function () {
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function () {
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup() {
if (!$("#overlay_form").is(':visible')) {
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position: 'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup);
</script>
I want to use something like following html
<html>
<div>
<a href="#" id="pop" >Product Overview</a>
<br/>
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>
<a href="#" id="pop" >User Interface</a>
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>
</div>
</html>
On clicking different links I want to open different content in pop up.
Is is possible without repetition of whole java script with different ids.
Thanks
First of all you can't use the same id twice on the same page, you currently use #pop, #close and #overlay_form on both your links, update them with a class or different ids.
You could add a div inside each of your a tags that stores your content then just show/hide this on click?
There are a number of ways in which you could do this, but the simplest one that uses your existing code, requires switching a lot of your id's to classes. Something like this:
HTML
<html>
<div>
Product Overview
<div class="overlay_form" id="popup1" style="display:none">
<a href="#" class="close" >Close</a><br />
Popup1 text.
</div>
User Interface
<div class="overlay_form" id="popup2" style="display:none">
<a href="#" class="close" >Close</a><br />
Popup2 text.
</div>
</div>
</html>
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//open popup
$(".pop").click(function () {
var targetPopup = $(this).attr('popup-id');
$("#" + targetPopup).fadeIn(1000);
positionPopup(targetPopup );
});
//close popup
$(".close").click(function () {
$(this).closest(".overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(targetPopup) {
$("#" + targetPopup).css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position: 'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup);
</script>
This approach lets you use the class attribute to define a larger group of items that share the same behavior (as well as styles :) ), while still supporting the "uniqueness" of each popup.
Note: this makes use of a custom attribute (popup-id) which will not validate unless you update your DOCTYPE declaration to include it. Many people simply overlook that issue, though, particularly since HTML5 is adding support for custom attributes.
EDIT: forgot to mention . . . since you are changing your IDs to classes here, you will also need to update your CSS #pop and #overlay_form to .pop and .overlay_form.