Ok, I have made a simple accordion in jQuery. It looks like this:
example
It is super lightweight and working well but I want to add a #hash "reading" ability to it. So if I use a url mydomain.net/faq#acc2 it will open second bar and scroll to it. Can you help me please :)
<div id="faq">
<h4 id="acc1">Question1</h4>
<div>
<p>text text text text</p>
</div>
<h4 id="acc2">Question2</h4>
<div>
<p>text text text text</p>
</div>
<h4 id="acc3">Question3</h4>
<div>
<p>text text text text</p>
</div>
</div>
$(document).ready(function($) {
var allPanels = $('#faq > div').hide();
$('#faq > h4').click(function() {
$this = $(this);
$target = $this.next();
if(!$target.hasClass('active')){
allPanels.removeClass('active').slideUp(200);
$target.addClass('active').slideDown(200);
} else {
$target.removeClass('active').slideUp(200);
}
return false;
});
})(jQuery);
You can get the URL content by using
window.location.href
and set that to a variable. Then create an "if" statement to query the results against your arguments (the url condition you want given each case).
Related
<h3>Something here</h3>
<p id="copythis">Copy this code</p>
<h3>Something here</h3>
<p id="copythisone">Copy this other text</p>
<h3>Something here</h3>
<p id="copythisone">Copy this other text</p>
<script type="text/javascript">
$(document).ready(function(){
$('#copythis').click(function(){
var text = $("#copythis").get(0)
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
})
});
</script>
I have different texts to copy (not all at once).
this code works for one text only. How do I work for more than one?
I just changed this part and it worked:
```var text = $(this).get(0)```
Thaks to #wahwahwah
$('#copythis').on("click", function(){
console.log($(this).text() + ": you clicked on '#copythis' ");
});
$('.copy').on("click", function(){
console.log($(this).text() + ": you clicked on a element with the class 'copy'");
});
$('p').on("click", function(){
console.log($(this).text() + ": you clicked on a <p> element'");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Something here</h3>
<p id="copythis" class="copy">Copy this code</p>
<h3>Something here</h3>
<p id="copythisone" class="copy">Copy this other text</p>
<h3>Something here</h3>
<p id="copythisone" class="copy">Copy this other text</p>
With JQuery, you can use .text() to get the contents of a p element. You could also change your selector to just grab the contents of all 'p' elements. The ID selector .(#copythis) will grab the element related to only that ID. The class selector (.copy) will attach to all elements with the class "copy."
This will help you isolate what's being clicked on. What you want to do with it - copy the contents to clipboard - might change the logic a bit depending on if you have control over the HTML source, and how your deciding what gets copied and doesn't.
I don't know what you are planning to do do, but basically this line
var text = $("#copythis").get(0);
is where the p-node will be selected from your dom an afterwards the content of this p-tag will be copied.
change it to
var text = $("#copythisone").get(0);
to copy the content of the 2nd p -tag
You could change the id of your third p-tag to sth. like copythisonetoo
var text = $("#copythisonetoo").get(0);
to get the content of the 3rd p tag.
But per definition an id should be unique in your document. Refer to this link:
https://www.w3schools.com/html/html_id.asp#:~:text=The%20id%20attribute%20specifies%20a,element%20with%20the%20specific%20id.
You could create a method with a parameter for the text to copy or an id.
With some additional info and your certain usecase we could probably help you most.
My main goal is to have the user click on any "nav" class item and display a certain paragraph ID based on which nav class was clicked. I can add the .css to this post if needed but the main thing is each paragraph ID has "display" none".
Here's the "nav" items.
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>
Here's my paragraph items which uses an ID of the nav ID's plus the number 1 which I figured was easiest when using jQuery as you'll see below in my jQuery code.
<p id="home1">Home text</p>
<p id="store1">Store text</p>
This is my jQuery code which when using "alert(changeCSS)" shows the correct ID ("ID" plus the number 1).
<script type="text/javascript">
$(".nav").click(function() {
var changeCSS = $(this).attr('id') + "1";
$(changeCSS).css('display', 'block');
});
</script>
I'm new to jQuery and programming in general so it maybe something simple I hope. Let me know if you have any suggestions. Thanks!
You are not adding # for the id selector:
$('#' + changeCSS)
Also consider the built-in jQuery effects .hide() and .show().
In your case it would be something like this:
$(".nav").click(function(){
var changeCSS = $(this).attr('id') + "1";
$(changeCSS).show();
});
This way you can easily control the speed at which your div appears or disappears:
$(changeCSS).hide(1000); //takes a second
$('.nav').click(function(event){
var tag = $(event.target);
var id= '#' + tag.attr('id') + '1';
$(id).css('display','block')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>
<p id="home1" style="display:none">this is the home paragraph</p>
<p id="store1" style="display:none">this is the store paragraph</p>
I may be close but since apparently nobody asked something like this, perhaps I may ask with the wrong wording.
I have a tabber with categorys which are dynamic and fancy box-galleys which also have dynamic attributes (shown here as divs with the attribute lala="xyz"). So how can I show on click on the tabber (here as first and last buttons) only the matching gallerys (in my code the first two or the last two divs should diapear)?
NOTE: the attributes are not predictable.
My html:
<div class="wrap">
<div class="box" lala="ui">
<p>This is my box. There are many like it, but this one is mine. 1</p>
</div>
<div class="box" lala="ui">
<p>This is my box. There are many like it, but this one is mine. 2</p>
</div>
<div class="box" lala="uibui">
<p>This is my box. There are many like it, but this one is mine. 3</p>
</div>
<div class="box" lala="uibui">
<p>This is my box. There are many like it, but this one is mine. 4</p>
</div>
</div>
<div class="showall">Show all</div>
<br>
<div class="mybutton" lala="ui">SHOW ONLY UI</div>
<div class="mybutton" lala="uibui">SHOW ONLY UIBUI</div>
And my jquery:
jQuery(function ($) {
$('.showall').click(function() {
$('.box').show();
});
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$(".box[lala]").not([myattr = "lala"]).hide();
});
});
Thanks in advance!
Inject your attribute into a attribute selector so that the end result looks like
not('[lala="uibui"]')
e.g.
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$(".box[lala]").not('[lala="' + myattr + '"]').hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tt1upb9o/
It can be simplified to just
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$('.box:not([lala="' + myattr + '"])').hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tt1upb9o/2/
Or even down to this (but now less readable):
$('.mybutton').click(function () {
$('.box:not([lala="' + $(this).attr('lala') + '"])').hide();
});
Try this:
$(".box").not('[lala = "'+myattr+'"]').hide();
I have four DIVS, one is ready and the other three are still hidden. When the link to the second div is pressed, I want the second div to show up, and so for the next link.
The problem is, all the four DIV doesn't have ID and has the same class.
I just want it to automatically run without knowing what is the ID and the class of the div, or anything inside the div. It may look like a slideshow but on click function.
<p> link to the ready div </P>
<p> link to the second div </P>
<p> link to the third div </P>
<p> link to the last div </P>
<div id="wrapper">
<div> this is the div that is ready. This div has no ID and has the same class with others <div>
<div> this is the second div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the third div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the last div that is hidden. This div has no ID and has the same class with others <div>
</div>
FIDDLE
i have made a fiddle that might suite your case please have a look. You can make some modifications according to your needs.
var currentDiv = 0;
$(document).ready(function(){
$(".container div").click(function(){
$(".container div").eq(currentDiv+1).css( "display", "block" );
currentDiv++;
})
});
JSFIddle Link
Im pretty sure this is what you are looking for.
jQuery
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here
So what we are doing is getting the index for the link pressed and then using that to select the div we want to show (this is using :nth-child()).
Note: I have put a container around the links so you it doesn't pick up every p on the page.
If you want only one at a time you can just set them all to hide before showing one.
jQuery:
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div").hide();
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here
JS FIDDLE DEMO
Explanation
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2</a>
<a idx="3">3</a>
<a idx="4">4</a>
</div>
$('.buttons a').click(
function(event)
{
var idx = $(event.target).attr('idx');
$('.div').hide(); //Hides all the divs
$('.parentDiv div:nth-child('+idx+')').show(); // Shows required div
}
);
DISADVANTAGE
If you will insert more contents, there is more work. Else no problem..
If you insert a div , you have to change all the links.
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2.0 Inserted Div</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2.0</a>
<a idx="3">2</a>
<a idx="4">3</a>
<a idx="5">4</a>
</div>
Not here , All the idx has to be changed. Since my code uses nth-child property
Edited
Updated Fiddle
Another Update
You can see in the headline what it is. I've four "div", and therein are each a p tag. When I go with the mouse on the first div, changes the "opacity" of the p tag of the first div. The problem is when I go on with the mouse on the second or third "div" only changes the tag "p" from the first "div". It should changes the their own "p" tags.
And it is important, that i cannot use CSS ":hover".
The problem is clear, it is that all have the same "id".
I need a javascript which does not individually enumerated all the different classes.
I' sorry for my english.
I hope you understand me.
My script:
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
Javascript:
function normal() {
var something = document.getElementById('something');
something.style.opacity = "0.5";
}
function hover() {
var something = document.getElementById('something');
something.style.opacity = "1";
CSS:
p {
opacity: 0.5;
color: red;
}
As Paul S. suggests, you need to pass this to the function so that it knows which element it has to work on.
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
And then select the child element <p> for the passed <div>. Here I select the first child p, i.e. the first element in the array of children of this element with tag p, that's why you see [0]. So if in each div you had two paragraph, then you could use e.g. getElementsByTagName("p")[1] to select the second <p>.
function normal(mydiv) {
mydiv.getElementsByTagName("p")[0].style.opacity="0.5";
}
function hover(mydiv) {
mydiv.getElementsByTagName("p")[0].style.opacity="1";
}
See the working example here: http://jsfiddle.net/mastazi/2REe5/
Your html should be something like this:
<div onmouseout="normal(1);" onmouseover="hover(1);">
<p id="something-1">LOLOL</p>
</div>
<div onmouseout="normal(2);" onmouseover="hover(2);">
<p id="something-2">LOLOL</p>
</div>
<div onmouseout="normal(3);" onmouseover="hover(3);">
<p id="something-3">LOLOL</p>
</div>
<div onmouseout="normal(4);" onmouseover="hover(4);">
<p id="something-4">LOLOL</p>
</div>
As you can see, we have different ids for your elements, and we pass the ids through the function that we trigger with onlouseover and onmouseout.
For your javascript, your code could be something like this:
function normal(id) {
var something = document.getElementById('something-'+id);
something.style.opacity = "0.5";
}
function hover(id) {
var something = document.getElementById('something-'+id);
something.style.opacity = "1";
}
For normal() and hover() we receive an id and change the style for the current element that have this id.
Please, check this JSFiddle that I've built for you.