I am using Rails and did a navbar. The navbar folds into a burger after the certain width has been reached. I am able to click on the burger-sign without defining any event listener in JS. I just added this into the head of my application.html.erb
<meta>
<%= javascript_include_tag 'application' %>
<%= yield :js %>
<meta>
After adding, the click worked perfectly, but my home link, root_path was broken. It constantly lead to the #index page, but would display only "2019"on the blank page, not the actual #index page layout. I fixed the links adding the get method ty my link, like this:
<li><%= link_to 'Home', root_path, method: :get %></li>
What still doensn't work, is my browser back button, this still leads to this weird blank page with the 2019 printed on it. Can someone explain what is happening and how do I get to the previous page by clicking on the browser back button? Thanks!
P.S. This is the sourse html
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="RST7jzlY6IftapnMzEI9BkObFqh4B8EaX4cnX7PavwQq7ziZ5PKkVtgnExe8oShZxl56m40/UBgYG0OacVrWbg==" />
<meta>
<script src="/assets/jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/bootstrap/affix.self-b2bd74404ab3c627c5129dcdd3bdc2fc0a9d4bff4e1b6f1bae96412f9a1e9723.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-7c7aa23778284da0e4aa395a0a6d858c7efd891c9312fe71908b28292654ac0c.js?body=1"></script>
<script src="/assets/bootstrap/button.self-b7a8ce9f47662b97ab74ef3dd416e93d3a4f644b252307a28231976a0149feef.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-c2c0ad2347d3fdd8447abd9d5792efed40ad5afadc5e0de3001e34904a6f68ce.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-4db094cc14a1aafa93e51e6f298115323037bb9e24c060dd0de52f27446f6227.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-7efa4aa654357ae664a98ec52151c25cd4927eacd1fabe038d068d9344b62cbd.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-4ca048907279f4bb9187ba2541ae5d03296917d5c42e8fef0b58ec31c8902f0f.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-e62629e47ba5fe8b7faaa745f2fef2ccdb1bfd56ffb4f95615684ef40c74bcc4.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-7fbfa844201ceeb4b896e4d185a33df19a284fe461281b7c0f78dbea2ef6da5a.js?body=1"></script>
<script src="/assets/bootstrap/transition.self-3c74f1999fcbf39cfb240b67c9a9e900863859f82f53fb27e5a388fe5e1a1c5c.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-82858d5843f55bfed321ea59fc5b180f3d2a8afc498ebc4d665561110b807875.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-a1e6d4555fb912f0405099135eaddbe8273ba8f08323477a471d34419d57b446.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1"></script>
<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/profile.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/reviews.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/user_steps.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/application.self-813dac1f9eb54ab17313987648014af35d74ebeb15c2265509c52491183d3dcc.js?body=1"></script>
<meta>
<link rel="stylesheet" media="all" href="/assets/style.self-67cdb30c3f83239515cab5c4f35c9f7533c426bd77b8d75c40e8ff613eb658ec.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-fe639f1da8d2570340060e10dc6bf2430bb27ff5e40357dce724cbc8efb24584.css?body=1" data-turbolinks-track="reload" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand pull-left" href="#">
<img src="/assets/logo_transparent-ad9441c50046e461177bad078050d5345754d0413d7ef8a7f549aa5bf35e466e.png" width="147" height="70" class="d-inline-block align-left mr-2">
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a data-method="get" href="/">Home</a></li>
<li><a>About</a></li>
<li><a>Search</a></li>
<li><a>Contact</a>
<li>
<div class="log-in-btn"><button class="btn" type="submit">Log in</button></div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
</div>
<head>
<title>Neignbornow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="empty-space"> </div>
<div class="site-blocks-cover overlay" style="background-image: url(https://images.unsplash.com/photo-1464082354059-27db6ce50048?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80);" data-aos="fade" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center justify-content-end text-center">
<div class="row justify-content-center mb-4">
<div class="col-md-8 text-left">
<div class="site-intro">
<h1>Home is about personal connections, not just neighbors.</h1>
<p>Recconect with your neighbors, by sharing things and experiences. Now.</p>
<button class="btn register" type="submit">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header -->
<!-- About section -->
<div class="site-section bg-light">
<div class="container">
<div class="col-12">
<h2>About Neighborheart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</p>
</div>
</div>
</div>
<!-- About section -->
<!-- Testimonials -->
<div class="site-section bg-white">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Testimonials</h2>
</div>
</div>
<div class="slide-one-item home-slider owl-carousel">
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_3.jpg" alt="Image" class="img-fluid mb-3">
<p>John Smith</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_2.jpg" alt="Image" class="img-fluid mb-3">
<p>Christine Aguilar</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_4.jpg" alt="Image" class="img-fluid mb-3">
<p>Robert Spears</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_5.jpg" alt="Image" class="img-fluid mb-3">
<p>Bruce Rogers</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<!-- Search section and show map -->
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="h5 mb-4 text-black">Search for items in your neighborhood</h2>
<!-- Serach bar -->
<div class="form-search-wrap mb-3" data-aos="fade-up" data-aos-delay="200">
<form method="post">
<div class="row align-items-center">
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-4">
<input type="text" class="form-control rounded" placeholder="What are you looking for?">
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="wrap-icon">
<span class="icon icon-room"></span>
<input type="text" class="form-control rounded" placeholder="Location">
</div>
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="select-wrap">
<span class="icon"><span class="icon-keyboard_arrow_down"></span></span>
<select class="form-control rounded" name="" id="">
<option value="">All Categories</option>
<option value="">Real Estate</option>
<option value="">Books & Magazines</option>
<option value="">Furniture</option>
<option value="">Electronics</option>
<option value="">Cars & Vehicles</option>
<option value="">Others</option>
</select>
</div>
</div>
<div class="col-lg-12 col-xl-2 ml-auto text-right">
<input type="submit" class="btn btn-primary btn-block rounded" value="Search">
</div>
</div>
</form>
</div>
<!-- Search bar -->
<!-- Map -->
<!-- Map -->
</div>
</div>
</div>
</div>
<!-- Search section Search section and show map -->
<!-- Cathegories -->
<div class="site-section" data-aos="fade">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Popular Categories</h2>
<p class="color-black-opacity-5">Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
<div class="overlap-category mb-5">
<div class="row align-items-stretch no-gutters">
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-car"></span></span>
<span class="caption mb-2 d-block">Services</span>
<span class="number">1,921</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-closet"></span></span>
<span class="caption mb-2 d-block">Events</span>
<span class="number">2,339</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-home"></span></span>
<span class="caption mb-2 d-block">Household</span>
<span class="number">4,398</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-open-book"></span></span>
<span class="caption mb-2 d-block">Books & Magazines</span>
<span class="number">3,298</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-tv"></span></span>
<span class="caption mb-2 d-block">Electronics</span>
<span class="number">2,932</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-pizza"></span></span>
<span class="caption mb-2 d-block">Beverages</span>
<span class="number">183</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Cathegories -->
<div class="newsletter bg-primary py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2>Newsletter</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-md-6">
<form class="d-flex">
<input type="text" class="form-control" placeholder="Email">
<input type="submit" value="Subscribe" class="btn btn-white">
</form>
</div>
</div>
</div>
</div>
</body>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<h2 class="footer-heading mb-4">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident rerum unde possimus molestias dolorem fuga, illo quis fugiat!</p>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Navigations</h2>
<ul class="list-unstyled">
<li>About Us</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Follow Us</h2>
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-instagram"></span>
<span class="icon-linkedin"></span>
</div>
</div>
</div>
<div class="col-md-3">
<form action="#" method="post">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Search products..." aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-white" type="button" id="button-addon2">Search</button>
</div>
</div>
</form>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
Related
The idea would be selecting a product by clicking on view Details button from PortfolioV3.vue and take you to ProductDetail.vue according to the product selected but I can't seem to find a way to make this link. What would be the most efficient way to configure this value passing information taken from json file from one PortfolioV3.vue to ProductDetail.vue?
portfolio-v3.json
{
"data":[
{
"image_path":"static/products/DELUXE-BATHROBE.jpg",
"title":"Productivity Tools",
"title_color":"bg-info",
"heading":"Deluxe Bathrobe",
"read_more_url":"javascript:void(0);",
"content": "bathrobe posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
},
{
"image_path":"static/products/HERRINGBONE-THERMAL-BLANKET.jpg",
"title":"Productivity Tools",
"title_color":"badge-warning",
"heading":"Herringbone Thermal Blanket",
"read_more_url":"javascript:void(0);",
"content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
},
{
"image_path":"static/products/MADISON-SPREAD-BLANKETS.jpg",
"title":"Productivity Tools",
"title_color":"bg-yellow",
"heading":"Madison Spread Blankets",
"read_more_url":"javascript:void(0);",
"content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
}
]
}
PortfolioV3.vue
<template>
<div>
<PageTitle
headerTitle="Our Latest Work"
headerSubTitle="We build something great in the world."
>
</PageTitle>
<div class="portfolio-wrapper section-gap port-3">
<div class="container">
<div class="blog-alternate" v-for="(portfolio,index) of portfoliov3.data" :key="index">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6">
<div class="overlay-wrap">
<img :src="portfolio.image_path" width="500" height="500" class="img-fluid border-rad w-100" alt="gallery images" />
<a :href="portfolio.image_path" data-fancybox="images" class="card-img-overlay primary-tp-layer pos-center text-center">
<span class="center-holder">
<a class="ih-fade-down square-40 rounded-circle bg-white shadow-md">
<i class="fa fa-plus align-middle"></i>
</a>
</span>
</a>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="portfolio-content">
<h5 :class="portfolio.title_color" class="badge p-2 mb-3 btn-pill"> {{portfolio.title}} </h5>
<h3 class="mb-3">{{portfolio.heading}}</h3>
<p class="mb-4">{{portfolio.content}}</p>
<a :href="portfolio.read_more_url" class="btn btn-outline-secondary btn-chk-dark"> READ MORE </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import portfoliov3 from 'Components/data/portfolio-v3.json'
export default {
data(){
return{
portfoliov3
}
}
}
</script>
ProductDetail.vue
<template>
<div>
<div class="product-wrapper section-gap pb-0">
<div class="container">
<div class="row mb-4">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="mb-4">
<div class="feature-box-thumb">
<img src="static/img/2.jpg" class="img-fluid card-shadow" alt="product image" />
</div>
<!-- feature box thumb closed -->
</div>
<div class>
<ul class="list-unstyled p-gallary-thumb list-p-detail row">
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 product-detail-content mb-4">
<div class="mb-3">
<h2 class="text-capitalize mb-3">Fleece Jacket</h2>
<!--<h4 class="font-26 text-primary">
<del class="text-muted mr-2">$187</del> $125.00
</h4>-->
</div>
<div class="mb-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eros lobortis, vestibulum turpis ac, pulvinar odio. Praesent vulputate a elit ac mollis. In sit amet ipsum turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eros lobortis, vestibulum turpis ac, pulvinar odio. Praesent vulputate a elit ac mollis. In sit amet ipsum turpis. Pellentesque venenatis, libero vel euismod lobortis, mi metus luctus augue, eget dapibus elit nisi eu massa. Phasellus sollicitudin nisl posuere nibh ultricies.</p>
</div>
<div class="mb-4">
<p class="mb-0">
<span class="font-weight-bold">Category :</span>
Electronics,
Lights,
Solar
</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
<!-- container closed -->
</div>
<!-- product wrapper closed -->
</div>
</template>
<script>
import RelatedProducts from "Components/Sections/RelatedProducts.vue";
import portfoliov2 from "Components/data/portfolio-v2.json";
export default {
components: {
RelatedProducts
},
data() {
return {
portfoliov2
};
}
};
</script>
I am simply trying to create a lightweight experience that will show a paragraph when a "read more" link is clicked, then close when the "read less: link is clicked.
I have a very limited understanding of JS and JQuery. I am currently using Bootstrap4 and calling in JQuery 3.5.1 through https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js. I placed my JS in an external file that I am calling in through my HTML.
The code I am currently using was written for me by another dev for a different Bootstrap site I work on.
The "Read More" "Read Less" toggle is working but I can't figure out how to get it to show the one "Read More" is clicked.
Here it is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="C:\Users\Ldchavez\Desktop\dailey_portfolio\resources\index.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;0,800;1,300&display=swap">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script type="text/javascript" src="C:\Users\Ldchavez\Desktop\dailey_portfolio\resources\index.js"></script>
</script>
</head>
<body>
<div class="container-fluid">
<div class="row align-middle">
<div class="col-12 col-md-4 background-color1 ">
<div class="row mt-5 ml-4">
<div class="col-3 px-0">
<img class="img-fluid rounded-circle" width="300"
src="C:\Users\Ldchavez\Desktop\dailey_portfolio\images\hero.png"
alt="s, wearing a tan suit jacket on a blue background">
</div>
<div class="col-9 align-self-center">
<h1 class="ml-3">Hello.</h1>
<h2 class="ml-3">I'm Name</h2>
</div>
</div>
<div class="col-12 my-4 px-5 text-justify">
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco...
</p>
<span class="read-more" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco...</p>
</span>
<a class="expand" data-more="0" href="javascript:void(0);" onclick="expandText(this);">Read More</a>
</div>
</div>
<div class="col-12 col-md-8 px-5">
<div class="row">
<div class="col-12 col-md-6 my-3 px-3">
<div class="card" style="width: 100%">
<img class="card-img-top" src="http://via.placeholder.com/1200x1200" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-6 my-3 px-3">
<div class="card" style="width: 100%">
<img class="card-img-top" src="http://via.placeholder.com/1200x1200" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 my-3 px-3">
<div class="card" style="width: 100%">
<img class="card-img-top" src="http://via.placeholder.com/1200x1200" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-6 my-3 px-3">
<div class="card" style="width: 100%">
<img class="card-img-top" src="http://via.placeholder.com/1200x1200" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
#more { display: none; }
JS
function expandText(el) {
if (el.getAttribute('data-more') == 0) {
el.setAttribute('data-more', 1);
el.innerHTML = 'Read Less';
el.previousSibling.style.display = 'inline';
} else if (el.getAttribute('data-more') == 1) {
el.setAttribute('data-more', 0);
el.innerHTML = 'Read More';
el.previousSibling.style.display = 'none';
}
}
here's how w3 does it:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
Read more
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>
My Bootstrap carousels are not working. When I click on the slider left or slider right buttons, the webpage just moves down and #bannerCarousel appears in the browser address bar. As for the "Testimonials" carousel, it is supposed to play automatically, but it doesn't do anything. Can someone please help me resolve this issue?
Here is my HTML and Javascript:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('.carouselBanner').carousel(),
$('.carouselTestimonial').carousel()
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RialedUp</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<section class="hero-unit">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
RialedUp
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div><!-- end navbar -->
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<div> </div>
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
<div class="item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
<div class="item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
</div><!-- end carousel inner -->
<a class="carousel-control left" href="#bannerCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#bannerCarousel" data-slide="next">›</a>
</div><!-- end bannerCarousel -->
</div>
</section><!-- end hero-unit -->
<section id="process">
<div class="container">
<div class="row">
<div class="h-line hidden-phone"> </div>
<div class="span3">
<div class="plan text-center">
<span class="process-icon iplan"> </span>
<h4 class="heading">Plan</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="design text-center">
<span class="process-icon idesign"> </span>
<h4 class="heading">Design</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="develop text-center">
<span class="process-icon idevelop"> </span>
<h4 class="heading">Develop</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="launch text-center">
<span class="process-icon ilaunch"> </span>
<h4 class="heading">Launch</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
</div>
</div>
</section><!-- end process -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="span3">
<div class="p-item">
<h4 class="heading">Portfolio</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<strong>Our Portfolio</strong>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-1.png" class="img-polaroid" alt="Web Design" />
<h5 class="title">LeafireDesigns</h5>
<small class="category">Web Design</small>
</div>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-2.png" class="img-polaroid" alt="Web Development" />
<h5 class="title">Unity</h5>
<small class="category">Web Development</small>
</div>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-3.png" class="img-polaroid" alt="Logo Design" />
<h5 class="title">Ingenious</h5>
<small class="category">Logo Design</small>
</div>
</div>
</div>
</div>
</div>
</section><!-- end portfolio -->
<section id="partners">
<div class="container">
<div class="row">
<div class="span3 text-center">
<img src="img/thumbnail/partner-1.png" alt="Graphic Driver" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-2.png" alt="Theme Forest" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-3.png" alt="Code Canyon" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-4.png" alt="Active Den" />
</div>
</div>
</div>
</section><!-- end partners -->
<section id="widgets">
<div class="container">
<div class="row">
<div class="span4">
<div class="testimonials">
<h4 class="heading">Testimonials</h4>
<div id="testimonialCarousel" class="carouselTestimonial">
<div class="carousel-inner">
<div class="active item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
<div class="item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
<div class="item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
</div><!-- end carousel-inner -->
</div><!-- end testimonialCarousel -->
</div><!-- end testimonials -->
</div>
<div class="span4">
<div class="blog">
<h4 class="heading">Our Latest Posts</h4>
<ul class="blog-lists">
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 4, 2017 | Posted by Admin</small>
</li>
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 3, 2017 | Posted by Admin</small>
</li>
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 2, 2017 | Posted by Admin</small>
</li>
</ul>
</div><!-- end blog -->
</div>
<div class="span3">
<div class="tweets">
<h4 class="heading">Latest Tweets</h4>
<ul class="tweet-lists">
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
</ul>
</div><!-- end tweets-->
</div>
</div>
</div>
</section><!-- end widgets -->
<footer>
<div class="container">
<div class="row">
<div class="span12 text-center">
<div class="table">
<ul class="footer-links">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
<div id="social">
<span class="social-sprite twitter"> </span>Follow Us on Twitter
<span class="social-sprite facebook"> </span>Like Us on Facebook
</div>
<small> © Rialed Up 2017</small>
</div>
</div>
</div>
</footer>
Change
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
to
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active item"> <!-- active item not active-item -->
https://jsfiddle.net/jv6xzgm6/
I have this as my jQuery
$(".part-txt").click(function() {
$('.txt-container').toggleClass("hide");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
<div class="col-sm-9 height">
<div class="row checkies">
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
</div>
</div>
<div class="row txt-container hide">
<div class="col-sm-12 hide-txt">
<p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
<div class="col-sm-9 height">
<div class="row checkies">
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
</div>
</div>
<div class="row txt-container hide">
<div class="col-sm-12 hide-txt">
<p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
</div>
</div>
</div>
Basically my problem is I would like to click the .part-txt div and showing .txt-container div without affecting other divs with the same class. Sorry beginner here.
You could use nextAll() to select the next txt-container element related with the current clicked part-txt, like :
$(".part-txt").click(function() {
$(this).nextAll('.txt-container').toggleClass("hide");
});
Hope this helps.
$(".part-txt").click(function() {
$(this).nextAll('.txt-container').toggleClass("hide");
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
<div class="col-sm-9 height">
<div class="row checkies">
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
</div>
</div>
<div class="row txt-container hide">
<div class="col-sm-12 hide-txt">
<p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
<div class="col-sm-9 height">
<div class="row checkies">
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
<div class="col-sm-4 text-center check">
<div class="row"><i class="fa fa-check color-dblue2"></i></div>
</div>
</div>
</div>
<div class="row txt-container hide">
<div class="col-sm-12 hide-txt">
<p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
</div>
</div>
</div>
Find it by its parent
$(".part-txt").click(function() {
$(this).parent().find('.txt-container').toggleClass("hide");
});
You can use pseudo select as such
$(".part-txt").click(function() {
$(".txt-container:first").toggleClass("hide");
});
I am using slick slider for a page.Everything works great except one thing: When I drag the slide sometimes the image or text bounces and that's look really bad. What can I do to avoid that problem?
Here is my code
<section class="portfolio" id="portfolio">
<div class="container" style="height:100px">
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
<div id="portfolio_slider">
<div id="item">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 text-right">
<div id="project_name">
PROJECT<br />
NAME
</div>
<div id="project-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor erat,
laoreet ut ullamcorper vel, fermentum vel ex. Donec convallis leo sit amet auctor
rutrum. Nullam accumsan risus at quam porttitor ec tortor erat, laoreet ut
ullamcorper vel, fermentum vel tristique.
</div>
<div id="read_more">Read More...</div>
</div>
<div class="col-lg-7 col-lg-offset-1" id="project_image">
<img class="img-responsive shadow" src="http://i.imgur.com/35Lun7R.jpg" />
</div>
<div class=" col-lg-1 col-md-1 social_buttons">
<div class="centered">
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-facebook"></i>
</div>
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-twitter"></i>
</div>
<div class="flex-item">
<i class="fa fa-instagram"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
in the code pen, in CSS, there is one class, #portfolio_slider #item with margin: top 20px remove it.