Here is my situation. I have 3 divs on my website. There is a button in each of divs. Here is my codes :
<div id="gg1">
<a class="btn">
</div>
<div id="gg2">
<a class="btn">
</div>
<div id="gg3">
<a class="btn">
</div>
May I know how to apply css style to 1 button only without effect on other 2 buttons Css or Jquery? Note that I cannot change the class and id of the buttons.
Use a descendant selector:
#gg1 a.btn {
/* styles here affect only a.btn elements within #gg1 */
}
Related
I'm using a lightbox plugin called fsLightbox (https://fslightbox.com). I need to add custom next/previous buttons but I don't understand how. I don't see any information in the documentation. Can someone point me in the right direction please?
Update:
This plugin has built-in next previous buttons that appear on either side of the lightbox. I want to add additional next/previous buttons within the lightbox with custom text (the name of the next or previous slide). To accomplish this I'm using a custom source:
<a data-fslightbox="partners" data-class="partner" href="#FirstPartner">
<img src="FirstPartner.jpg" />
</a>
<a data-fslightbox="partners" data-class="partner" href="#SecondPartner">
<img src="SecondPartner.jpg" />
</a>
<div class="display-none">
<div id="FirstPartner">
<div class="copy-container">
Some copy
</div>
<div class="navigation-container">
<button onclick="NextSlide()">
Second Partner >>
</button>
</div>
</div>
<div id="SecondPartner">
<div class="copy-container">
Some copy
</div>
<div class="navigation-container">
<button onclick="PrevSlide()">
<< First Partner
</button>
</div>
</div>
</div>
Since the library does not seem to allow custom buttons there always exists is a css solution.
First we need to hide the svg arrows by setting display: none.
.fslightbox-slide-btn svg {
display: none;
}
After that the content is being replaced by My text.
.fslightbox-slide-btn:after {
content: 'My text';
color: white;
}
This is what it looks like:
Live Demo
I'm working on portfolio items, where every item looks like this
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site"></div>
</div>
Previous div is hidden and items are shown by this code
<a class="project" :href="`http://www.${item.site}`" >
So, if I put like "mysite.com" in item-site div and hover over item output is www.mysite.com and that is ok if item-site is not empty. But if that div is empty output is www. and I dont want that.Is there a way to prevent that?
How to dissable click if item-site class is empty, so if I click on it nothing happens, but if is not empty and has link then if I click it's opens that link in new window.
You can use the pointer-events: none CSS statement to disable the hover and click events on an element.
In your case, it might look something like this:
HTML:
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site not-clickable"></div>
</div>
CSS:
.not-clickable{
pointer-events: none;
}
If the DOM element (in this case <div class="item-site"></div>) is empty, then add the class not-clickable. If the element has content, then remove the class not-clickable.
Please also note that <div> tags are not clickable by default. It sounds like you want these to be links which are <a> tags. Also, an <a> tag without the href attribute has no pointer events - so an alternative would be to provide the href when you want the element to be clickable, and remove it when you want the element to not be clickable.
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<a class="item-site">I should not be clickable</a>
<a class="item-site" href="https://www.example.com" target="_blank">
I should be clickable, and I will also open in a new tab
</a>
</div>
Here is a pen that might explain further:
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111
I have used bootstrap feature to make a functionality of showing/hiding one div at a time on button click like this
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
<button class="collapsed" data-toggle="collapse" href="#collapseExample">
<span class="if-collapsed">Add more div</span>
<span class="if-not-collapsed">Remove more div</span>
</button>
<div class="collapse" id="collapseExample">
//some content
<button class="collapsed" data-toggle="collapse" href="#collapseExample2">
<span class="if-collapsed">Add 2nd last div</span>
<span class="if-not-collapsed">Remove 2nd last div</span>
</button>
</div>
<div class="collapse" id="collapseExample2">
//Similar code as above
</div>
This allows me to put buttons inside collapsed div which I can click and add more div once the initial collapsed div is open. This allows me to add one div at a time.
If a user clicks add 2nd last div button and then 3rd last div button and so on.. and then goes and clicks remove 2nd last div button all other divs under it like 3rd last div and fourth last div remain displayed. Is there a way through CSS or Javascript that I can hide all successive div once the parent div is closed.
You might want some multiple selectors rule like
[data-toggle="collapse"].collapsed .if-not-collapsed,
[data-toggle="collapse"]:not(.collapsed) .if-collapsed,
[data-toggle="collapse"].collapsed~[data-toggle="collapse"]
{
display: none;
}
~ is the succeeding siblings selector. You can list multiple selectors by comma.
Be more specific like
[data-toggle="collapse"].collapsed~[data-toggle="collapse"]>.some-child
if your do not want do make the entire div elements invisible.
Given the following code from the bootstrap website for the collapse functionality:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?
I used this to hide the button after it was clicked:
HTML (just added a class "hide-me"):
<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>
CSS:
.hide-me[aria-expanded="true"] {display: none;}
This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:
<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse hook">
<div class="well">
...
</div>
</div>
Heres the fiddle:
http://jsfiddle.net/hptrpaxh/1/
Add this:
$('.btn').toggle();
I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.
Sorry didn't see you were trying to do it without extra js.
Here's an easy CSS trick. You can obviously modify it as well
give the button a class like hidden-button
Then use this CSS
.hidden-button {
position:relative;
z-index:0;
}
.well {
position:relative;
margin-top:-33px;
z-index:10000;
}
Here's a fiddle http://jsfiddle.net/cp5Lvtdo/4/
This can be done in Bootstrap 5 (and presumably 4) using the native Accordion functionality. Place the button and the content in separate accordion item elements, and set the parent on the collapsible content per the docs.
Notice that I've hidden the accordion item borders with b-0.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="accordion m-4" id="accordionArea">
<div class="accordion-item border-0">
<div class="accordion-collapse collapse show">
<button class="btn btn-primary" role="button"
data-bs-toggle="collapse" data-bs-target="#content"
aria-expanded="false" aria-controls="content">Toggle button & content
</button>
</div>
</div>
<div class="accordion-item border-0">
<div id="content" class="accordion-collapse collapse"
data-bs-parent="#accordionArea">
<div>Some content.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
If you would like to be able to collapse the content and show the link again without reloading the page you can wrap the whole content section (your <div>) in the <a> element.
Place some link content before the actual collapsible content and give it a class or id. Then add a custom CSS class to the <a> tag as explained in the previous answer but add a child selector like this:
.toggle-hide[aria-expanded="true"] > /* your link content class or id here */ {
display: none;
}
This will make the link less visible but you'll be able to click the content itself to collapse it and show back just the link.
I have a page what will have a few buttons on it and on a click of a button I basically need it to swap divs out - I have them wrapped in a parent div with an id and then each div that will be replaced will get it's own id as well. I got this code to work for swapping, but it will be tedious and not good code at all to do this if we end up with 30 or so pairings.
So how do I clean this up so on a click, the active div is set to display: none, and the one clicked is set to display: block?
Here is my jQuery code that is working for now. For this I want the macaroni to display and the farfalle to hide.
$('#macaroniButton').click(function(){
$('#macaroni').toggle();
$('#farfalle').toggle();
});
<div id="topchanger">
<div id="farfalle">
.....
</div>
<div id="macaroni">
.....
</div>
</div>
<div class="circlerow">
<div class="circlepasta" id="macaroniButton">
......
</div>
<div class="circlepasta" id="AnotherButton">
......
</div>
</div>
</div>
You could start with this. Expand my answer accordingly.
$('#macaroniButton').click(function(){
$("#macaroni").show().siblings('div').hide();
});
You can give a class to all the div that you want to show/hide and before handling a click, hide all div with that class. Let's say you give it a class 'item':
<div id="topchanger">
<div id="farfalle" class="item">
.....
</div>
<div id="macaroni" class="item">
.....
</div>
</div>
and your javascript will be:
$('div.item').click(function(){
$('div.item').hide();
$(this).show();
});
Note that $(this) refers to the item that was just clicked.
Hope it hepls