I have three titles acting as buttons. Button 1, 2 and 3. On page load, I am wanting the button 1 section to show, but then if someone would click on button 2 or 3 for the previous button description to hide and for the new one to appear in its place.
So far I cannot get this to work. I added display: none; to the general class, but I as I said, I want the first one to display on page load.
What am I doing wrong?
$('#big-three-names').click(function() {
var thisDescription = $('.big-three-info', $(this));
$('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
You can do following way using JQuery. Get html text of selected button and display div using .eq() of JQuery.
Display first using $('.big-three-info').eq(0).css("display", "block"); on page load.
$('.big-three-names').click(function() {
var i = $( this ).html();
$('.big-three-info').css("display", "none")
$('.big-three-info').eq(i-1).css("display", "block");
});
$('.big-three-info').eq(0).css("display", "block");
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
here is another solution
$('.big-three-info').eq(0).show();//show the first
$('.big-three-names').click(function() {
var index = $(this).index();//getting the index for button
$('.big-three-info').hide().eq(index).show();//first hide all then show the div with equal index
});
JS Fiddle
1.WORKING DEMO
2.Updated DEMO
HTML
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names one">1</div><div class="big-three-names two">2</div><div class="big-three-names three">3</div>
<div class="big-three-info one-sub">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info two-sub">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info three-sub">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
JS
$('.big-three-names').click(function() {
$(".big-three-info").hide();
$("."+$(this).attr("class").split(" ")[1]+"-sub").show();
});
By the way big-three-names is your class name and not ID
Related
I am new to HTML CSS. I am trying to create image slider.When i access images through document.getElementsByClassName through javascript objects and if i print its length in console it return 0. And I need to move those images from right to left smoothly. I tried using translateX property. Is there any other way to do that. I don't know what's gone wrong?
function slider() {
var i;
var x = document.getElementsByClassName("image-container");
for (i in x.length) {
x[i].style.transform = "translateX(-90%)";
}
}
slider();
.content {
margin-top: 10px;
display: flex;
height: 85vh;
background: yellow;
width: 100%;
/* overflow: hidden; */
padding: 0px;
}
.inner-content {
padding: 75px 50px 0px;
display: flex;
margin: auto;
border: 1px solid black;
}
.cont {
flex: 1.5;
padding: 90px 0px 0px 50px;
background: chocolate;
}
.cont h3 {
font-size: 30px;
padding-bottom: 10px;
letter-spacing: 1px;
text-shadow: 1px 0px black;
}
.cont p {
font-size: 20px;
padding-bottom: 10px;
}
.cont button {
width: 150px;
margin: auto;
height: 11%;
margin-top: 10px;
font-size: 18px;
border: 2px solid #072085;
color: #072085;
background: white;
border-radius: 20px;
text-align: center;
}
.image-container {
align-items: center;
z-index: 1;
flex: 1;
}
.image-container img {
max-width: 300px;
height: auto;
margin: 0 auto;
animation: drop 1.5s ease;
z-index: 1;
}
<div class="main-page">
<div class="content">
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png" />
</div>
</div>
<!----2nd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png" />
</div>
</div>
<!----3rd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png" />
</div>
</div>
</div>
</div>
I click on a div container (it disappears) and another one appears with a button. Then, I want to go back to the previous div container using a button made-up of a div container (keep in mind that I only want to perform this action in the currentTarget).
I only want to do this to the current container or the one clicked on!
$(document).ready(() => {
$('.shown').on('click', event => {
$(event.currentTarget).next('.tab').show();
$(event.currentTarget).hide();
});
$('.button').on('click', event => {
/*i want to hide the container with class tab and show the container with class shown*/
});
});
.shown {
width: 400px;
height: 100px;
background-color: green;
}
.con {
width: auto;
height: auto;
border: 1px solid black;
}
.main {
width: auto;
height: 170px;
background-color: red;
margin-top: 10px;
padding: 5px 10px;
}
.tab {
width: 400px;
height: 100px;
background-color: blue;
display: none;
}
p {
display: inline-block;
}
.button {
width: 50px;
background-color: white;
border: 5px dotted white;
padding: 3px 5px;
margin: 0px 10px;
}
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>One</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Two</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Three</p>
<div class="button">Show</div>
</div>
</div>
</div>
Something like this?
$(document).ready(()=>{
$('.shown').on('click',event=>{
$(event.currentTarget).next('.tab').show();
$(event.currentTarget).hide();
});
$('.button').on('click',event=>{
/*i want to hide the container with class tab and show the container with class shown*/
$('.tab').hide();
$('.shown').show();
});
});
.shown{
width: 400px;
height: 100px;
background-color: green;
}
.con{
width: auto;
height: auto;
border: 1px solid black;
}
.main{
width: auto;
height: 170px;
background-color: red;
margin-top: 10px;
padding: 5px 10px;
}
.tab{
width: 400px;
height: 100px;
background-color: blue;
display: none;
}
p{
display: inline-block;
}
.button{
width: 50px;
background-color: white;
border: 5px dotted white;
padding: 3px 5px;
margin: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab"><p>One</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab"><p>Two</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Three</p>
<div class="button">Show</div>
</div>
</div>
</div>
Pls see my codepen here: http://codepen.io/Chiz/pen/oLpGOB
It looks fine, until you resize the window and reduce the width of the browser window, and then the first card becomes positioned taller than the rest of the 3 cards! What causes this and how do I fix it?
Tks!
* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Open Sans";
}
.header {
background-color: #1b9ef2;
width: 100%;
height: 20rem;
}
.header h1 {
color: white;
font-size: 1.5rem;
line-height: 15rem;
text-align: center;
}
.CardContainer {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: -6rem;
}
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
}
.Card h2 {
color: #1b9ef2;
font-size: 1.2rem;
font-weight: 600;
padding:2.5rem;
}
.cardimgcontainer
{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.Card img
{
width:80%;
height:40%;
max-height:180px;
text-align:center;
}
.Card .Price
{
position:absolute;
bottom:0;
width:100%;
padding:2.5rem;
line-height:1.5rem;
color:rgb(70,70,70);
}
.Card .Price .bold
{
font-weight:800;
font-size:1.4rem;
}
<div class="header">
<h1>Choose your subscription plan</h1>
</div>
<div class="CardContainer">
<div class="Card">
<h2>2 Days Trial</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
</div>
<div class="Price"><span class="bold">$9.99</span><br />1 account</div>
</div>
<div class="Card">
<h2>Personal</h2>
<div class="cardimgcontainer">
<img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
</div>
<div class="Price"><span class="bold">$29.99</span><br />5 accounts</div>
</div>
<div class="Card">
<h2>Advanced</h2>
<div class="cardimgcontainer">
<img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
</div>
<div class="Price"><span class="bold">$39.99</span><br />10 accounts</div>
</div>
<div class="Card">
<h2>Business</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
</div>
<div class="Price"><span class="bold">$49.99</span><br />50 accounts</div>
</div>
</div>
Use vertical-align: top;
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position: relative;
vertical-align: top;
}
One more best solution is you can tile your cards into full width which I have shown in demo. (for responsive mode)
Responsive CSS:
#media only screen and (max-width: 800px) {
/*** You can change the responsive screen size as per your requirement.
.Card {
width: 100%;
margin-bottom: 20px;
}
}
Full Demo:
* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Open Sans";
}
.header {
background-color: #1b9ef2;
width: 100%;
height: 20rem;
}
.header h1 {
color: white;
font-size: 1.5rem;
line-height: 15rem;
text-align: center;
}
.CardContainer {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: -6rem;
}
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
}
.Card h2 {
color: #1b9ef2;
font-size: 1.2rem;
font-weight: 600;
padding:2.5rem;
}
.cardimgcontainer
{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.Card img
{
width:80%;
height:40%;
max-height:180px;
text-align:center;
}
.Card .Price
{
position:absolute;
bottom:0;
width:100%;
padding:2.5rem;
line-height:1.5rem;
color:rgb(70,70,70);
}
.Card .Price .bold
{
font-weight:800;
font-size:1.4rem;
}
#media only screen and (max-width: 800px) {
.Card {
width: 100%;
margin-bottom: 20px;
}
}
<div class="header">
<h1>Choose your subscription plan
</h1>
</div>
<div class="CardContainer">
<div class="Card">
<h2>2 Days Trial
</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
</div>
<div class="Price">
<span class="bold">$9.99
</span>
<br />1 account
</div>
</div>
<div class="Card">
<h2>Personal
</h2>
<div class="cardimgcontainer">
<img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
</div>
<div class="Price">
<span class="bold">$29.99
</span>
<br />5 accounts
</div>
</div>
<div class="Card">
<h2>Advanced
</h2>
<div class="cardimgcontainer">
<img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
</div>
<div class="Price">
<span class="bold">$39.99
</span>
<br />10 accounts
</div>
</div>
<div class="Card">
<h2>Business
</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
</div>
<div class="Price">
<span class="bold">$49.99
</span>
<br />50 accounts
</div>
</div>
</div>
just add vertical-align: top; for the Card class.
Your layout is looking good in big screen That's why you need to write this code only for small devices so You can try the below code.
#media (max-width: 768px){
.CardContainer .Card{
float: left;
}
}
You need to add vertical-align:top; to .Card.
Because you have used display:inline-block So, by default it is vertical-align:baseline;
And it will align the baseline of the element with the baseline of the parent element.
Your updated Codepen
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
vertical-align:top;
}
I think this will do the job:
.CardContainer .card {vertical-align:top;}
I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here
Here is the JSFiddle
Look at the animation, the gray background div expands and collapses with jerk (without animation).
Can anyone help me out.
HTML:
<div class="referrals-data">
<div class="data-contner">
<div class="table-elmnt">
<div class="referral-band row-elmnt">
<div class="clearfix cell-elmnt">
<div class="referral-id have-referrals">
<span class="referral-pic"></span>
<span class="referral-name">Click me</span>
</div>
</div>
<div class="cell-elmnt">
$2000
</div>
<div class="cell-elmnt">
$50
</div>
</div> <!--referral-band-->
<div class="my-referral">
<div class="referrals-data sub-referral">
<div class="table-elmnt">
<div class="referral-band row-elmnt">
<div class="clearfix cell-elmnt">
<div class="referral-id">
<span class="referral-pic"></span>
<span class="referral-name">User</span>
</div>
</div>
<div class="cell-elmnt">
$2000
</div>
<div class="cell-elmnt">
$50
</div>
</div> <!--referral-band-->
</div> <!--table-elmnt-->
</div>
</div> <!--my-referral-->
</div> <!--table-elmnt-->
jQuery
$('.my-referral').hide();
$('.have-referrals').click(function () {
if($(this).parent().parent().parent().parent().children('.my-referral').css('display') == 'none'){
$(this).addClass('show');
}else{
$(this).removeClass('show');
};
$(this).parent().parent().parent().children('.my-referral').slideToggle();
});
CSS
.table-elmnt { display: table; width: 100%; }
.row-elmnt { display: table-row; width: 100%; padding: ; }
.cell-elmnt { display: table-cell; width: 15%; vertical-align: top; padding: 7px 10px; }
.cell-elmnt:first-child { width: 70%; }
.referrals-data { margin-bottom: 7px; }
.data-contner { background: #d4d4d4; }
.my-referral { padding-left: 25px; }
.sub-referral { margin-bottom: 0; border-bottom: none; }
.referral-id { float: left; padding-left: 20px; }
.referral-pic { padding: 2px; border-radius: 100px; background: #ffffff; width: 25px; height: 25px; display: inline-block; overflow: hidden; vertical-align: middle; text-align: center; }
.referral-name { display: inline-block; vertical-align: middle; margin-left: 7px; }
.have-referrals { cursor: pointer; }
Use "Speed" parameter with slideToggle() as :
$(this).parent().parent().parent().children('.my-referral').slideToggle("slow");
It would appear as if displaying the divs as table rows and cells is at the heart of the issue. If you remove those properties and instead display as an inline-block it works perfectly:
http://jsfiddle.net/V5zL8/3/
.table-elmnt {
width: 100%;
}
.row-elmnt {
width: 100%;
}
.cell-elmnt {
width: 15%;
vertical-align: top;
padding: 12px 0;
display: inline-block;
}
.cell-elmnt:first-child {
width: 68%;
padding: 7px 0;
}