I have seen several similar questions, but can't find a solution that works well for me. I need the collapsed content outside of the header container. My basic set up is like so
<div id="buttonRow">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row collapse-row" id="rowOne">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header One</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 collapse-row" id="rowTwo">
<div class="row">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header Two</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 collapse-row" id="rowThree">
<div class="row">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header Three</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 d-none" id="ContentOne">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-12 d-none" id="ContentTwo">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-12 d-none" id="ContentThree">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
So if Header One is clicked, contentOne should collapse etc. I have not done much with the Javascript yet, just obtain the id
$('.collapse-row').click(function() {
var id = $(this).attr("id");
alert(id)
});
What I want to try and avoid is writing separate code for each collapse. I wanted to somehow use the id to make the correct content collapse. What would be the best way to achieve this?
Additionally, I also have the same headers within the navigation at the top of the page. When these ones are clicked, it should scroll down and collapse the appropriate one. So I have to somehow fit this in as well.
I have created a demo JSFiddle with the basic structure.
Any advice would be appreciated.
Thanks
One way to achieve this would be through the use of data-* attributes on the header elements. The data attributes will hold the target element id. A small tweak to the JS allows the d-none class to be toggled on the rows. Updated fiddle
Update HTML. Notice the data-target-id attribute.
<div class="row collapse-row" data-target-id="ContentOne">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header One</p>
</div>
</div>
</div>
Update JS
$('.collapse-row').click(function() {
var id = $(this).data("target-id");
$("#" + id).toggleClass("d-none");
});
Related
I want to align 2 div in the same line , I used class row and col-lg- , but still not working .
What's wrong ?
Thanks
<div class="container">
<div class="row" style="align-items-center">
<div class="col-lg-6">1er element</div>
<div class="col-lg-6">2nd element</div>
</div>
</div>
you could try the following:
<div class="container">
<div class="row" style="align-items-center">
<div class="col-md-6">1er element</div>
<div class="col-md-6">2nd element</div>
</div>
</div>
don't hesitate to let us know if it's working.
You can use the same classes used in sale order report:
<div class="row text-center">
<div class="col-auto col-6">1er element</div>
<div class="col-auto col-6">2nd element</div>
</div>
I am trying to render the react code on the server side. The code is being built and then rendered on the browser. But the classes that need to be added in the react code is being omitted. Can anyone please help me with what exactly is happening here.
This is how the code should appear but the classes are changed when the code is rendered
<div class="events-s">
<div class="content-w">
<div class="content">
<h1 class="event-section">Events</h1>
<div class="feature-events">
<h2 class="pb-block">Featured Events</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<div class="pb-b"></div>
<h2 class="pb-block-t">Where We'll Be Next</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<h2 class="pb-block-t">Past Events</h2>
</div>
</div>
</div>
</div>
how the code is actually rendered :
**<div class="main-content">**
<div class="content-w">
<div class="content">
<h1 class="event-section">Events</h1>
<div class="feature-events">
<h2 class="pb-block">Featured Events</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<div class="pb-b"></div>
<h2 class="pb-block-t">Where We'll Be Next</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<h2 class="pb-block-t">Past Events</h2>
</div>
</div>
</div>
</div>
This was solved .. i was not using the correct relative url to fetch the page
so the contents were not loaded correctly
I have a simple layout like this...
<div class="container">
<div class="row" id="234">
<div class="left special">
This is left content
</div>
<div class="right">
This is right content
</div>
</div>
<div class="row" id="944">
<div class="left">
This is left content
</div>
<div class="right">
This is right content
</div>
</div>
<div class="row" id="332">
<div class="left">
This is left content
</div>
<div class="right special">
This is right content
</div>
</div>
</div>
I am trying to use jQuery to target only the row ids that contain the special class within them. I have this so far
jQuery( ".row:has(.special)" ).addClass( "test" );
But it is not adding the test class, where am I going wrong?
You can simply use the .has method here, to add a class to all elements that have an element with the class special in them:
$(".row").has(".special").addClass("test");
.test{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row" id="234">
<div class="left special">
This is left content special
</div>
<div class="right">
This is right content
</div>
</div>
<div class="row" id="944">
<div class="left">
This is left content
</div>
<div class="right">
This is right content
</div>
</div>
<div class="row" id="332">
<div class="left">
This is left content
</div>
<div class="right special">
This is right content special
</div>
</div>
</div>
You could always go backwards.
$('.special').closest('.row').addClass('test');
Find the elements with the special class, find their closest parent record with the row class, and put the class on them. Since you are navigating from child to parent, you know that row has a child of special.
I am trying to create individual toggle for elements to show / hide.
All similar elements are responding to the action. How do I make this work for one particular set only? All the similar sections are getting toggled currently
Heres a fiddle of what I have created
https://jsfiddle.net/bqu0hznf/
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title">Basic panel example</h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title">Basic panel example</h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title">Basic panel example</h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('.acc-toggle').click(function() {
$( '.panel-custom p , .panel-custom .img-wrap img' ).fadeToggle('fast', 'linear');
});
</script>
Use $(this).closest('.panel-custom') to find ancestor .panel-custom and then find p, .img-wrap img inside it like following.
$('.acc-toggle').click(function() {
$(this).closest('.panel-custom').find('p, .img-wrap img').fadeToggle('fast', 'linear');
});
UPDATED FIDDLE
Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});
Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.