I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.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.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">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>
Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example
I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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>
You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});
Related
I have this "Accordion Type" Snippet right now. It opens the content below the button on click and closes it again. Now I am looking for a solution to make the state of the button visible to the user e.g if Button 2 is opened, I want to show a "-" indicating that it can be closed with a click. Same with the closed buttons to show a "+". Is this possible? Thanks in advance :)
This is my code right now:
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery(this).next('.ss_content').slideToggle('fast');
});
jQuery('.ss_content').eq(1).show();
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
<div class="ss_button">Einsteiger</div>
<div class="ss_content">
<p>Test1</p>
</div>
<div class="ss_button">Mittelklasse</div>
<div class="ss_content">
<p>Test2</p>
</div>
<div class="ss_button">High-End</div>
<div class="ss_content">
<p>Test3</p>
</div>
</div>
I've added some changes to your css:
.ss_button:before {
content: "+ ";
}
.ss_button.active:before{
content: "- ";
}
Then we toogle the active class:
jQuery('.ss_button.active').not(jQuery(this)).removeClass('active')
jQuery(this).toggleClass('active');
This way you don't have to change your html.
Demo
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_button.active').not(jQuery(this)).removeClass('active')
jQuery(this).toggleClass('active');
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery(this).next('.ss_content').slideToggle('fast');
});
jQuery('.ss_content').eq(1).show();
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_button:before {
content: "+ ";
}
.ss_button.active:before{
content: "- ";
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
<div class="ss_button">Einsteiger</div>
<div class="ss_content">
<p>Test1</p>
</div>
<div class="ss_button active">Mittelklasse</div>
<div class="ss_content">
<p>Test2</p>
</div>
<div class="ss_button">High-End</div>
<div class="ss_content">
<p>Test3</p>
</div>
</div>
You can add an empty span in your buttons and change the content (+ or -) in the click functions.
Check lines #4 and #6, the same of the code is the same.
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery('.ss_button').find('span').text('+');
jQuery(this).next('.ss_content').slideToggle('fast');
jQuery(this).find('span').text('-');
});
jQuery('.ss_content').eq(1).show();
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
<div class="ss_button">Einsteiger
<span>+</span></div>
<div class="ss_content">
<p>Test1</p>
</div>
<div class="ss_button">Mittelklasse
<span>+</span></div>
<div class="ss_content">
<p>Test2</p>
</div>
<div class="ss_button">High-End
<span>+</span></div>
<div class="ss_content">
<p>Test3</p>
</div>
</div>
I'm trying to create a custom drop down menu, using HTML, CSS and Vanilla Javascript.
I've managed to get the menu to appear when the user clicks on the the "from" input field, however when I try and click on an option, it wont let you add the value stored in the "code" dataset.
I did get it to work by using setTimeout method, however it is a bit hit and miss sometimes and doesn't seem like a good solution.
Is there an alternative way to get it to work?
function app() {
var messages = document.querySelector(".messages");
var inputFrom = document.querySelector(".input-from");
var inputTo = document.querySelector(".input-to");
var nearestContainer = document.querySelector(".nearest-container");
inputFrom.addEventListener("focus", inputToFocusIn, false);
function inputToFocusIn(e) {
messages.innerHTML = "focusin event triggered on input-from";
// add class
inputFrom.classList.add("input-from--focusin");
nearestContainer.classList.add("nearest-container--active");
// remove class
inputFrom.classList.remove("input-from--focusout");
nearestContainer.classList.remove("nearest-container--hidden");
}
inputFrom.addEventListener("focusout", inputToFocusOut, false);
function inputToFocusOut(e) {
messages.innerHTML = "focusout event triggered on input-from";
// add class
inputFrom.classList.remove("input-from--focusin");
nearestContainer.classList.remove("nearest-container--active");
// remove class
inputFrom.classList.add("input-from--focusout");
nearestContainer.classList.add("nearest-container--hidden");
}
var nearestStations = document.querySelectorAll(".nearest-station");
// add event listener to buttons
for(var nearestStation of nearestStations) {
nearestStation.addEventListener("click", addToInputFrom, false);
}
function addToInputFrom(e) {
inputFrom.classList.add("input-from--focusout");
nearestContainer.classList.add("nearest-container--hidden");
inputFrom.classList.remove("input-from--focusin")
nearestContainer.classList.remove("nearest-container--active")
var targetDataset = e.currentTarget.dataset.code;
messages.innerHTML = "station added to input from field"
inputFrom.value = "";
inputFrom.value = targetDataset;
}
var switchButton = document.querySelector(".button-switch");
switchButton.addEventListener("click", clickSwitch, false);
function clickSwitch(e) {
var inputFromValue = inputFrom.value;
var inputToValue = inputTo.value;
inputFrom.value = inputToValue;
inputTo.value = inputFromValue;
}
}
window.onload = app();
/* stylesheet */
body {
font-family: "GRAPHIK";
font-style: normal;
font-weight: 400;
font-size: 16px;
color: #242424;
}
* {
box-sizing: border-box;
outline: none;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #FF4136;
}
.search-container {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 300px;
padding: 10px;
background-color: #FFF;
border-radius: 10px;
}
.form-container {
display: flex;
flex-direction: row;
width: 100%;
}
.input-container {
width: 100%;
}
.input {
width: 100%;
border: none;
border-radius: 10px;
background-color: #f1f1f1;
padding: 10px;
}
.input-from {
margin-bottom: 5px;
}
.input-from--focusout {
border-radius: 10px;
}
.input-from--focusin {
border-radius: 10px 10px 0 0;
}
.input-to {
margin-bottom: 5px;
}
.switch-container {
margin-bottom: 5px;
}
.button {
border: none;
background-color: transparent;
}
.button-switch {
height: 100%;
width: 38px;
margin-left: 5px;
background-color: #f1f1f1;
border-radius: 10px;
background-image: url(../assets/images/switch.svg);
background-position: center;
background-size: 20px;
background-repeat: no-repeat;
}
.button-switch:hover {
background-image: url(../assets/images/switch-hover.svg);
}
.button-search {
padding: 10px;
background-color: #2ECC40;
color: #FFF;
border-radius: 10px;
width: 100%;
transition: background-color 0.5s ease;
}
.button-search:hover {
background-color: #33e147;
}
.input-container-to {
position: relative;
}
.nearest-container {
position: absolute;
top: 38px;
background-color: #f1f1f1;
padding: 5px;
border-radius: 0 0 10px 10px;
width: 100%;
z-index: 100;
}
.messages {
width: 300px;
background-color: #FFF;
padding: 5px;
border-radius: 10px;
text-align: center;
margin-bottom: 5px;
font-size: 10px;
}
.finding, .show-more {
width: 100%;
font-size: 10px;
font-style: italic;
margin: 0;
padding: 5px;
}
.show-more {
text-align: center;
}
.nearest-station {
font-size: 10px;
padding: 5px;
border-radius: 10px;
}
.nearest-container--hidden {
display: none;
}
.nearest-station--active {
display: flex;
}
.nearest-station:hover {
background-color: #FFF;
cursor: pointer;
}
.logo {
margin-right: 5px;
}
.nr-logo {
width: 15px;
}
.station-distance {
font-style: italic;
float: right;
}
<div class="container">
<div class="messages">messages here</div>
<div class="search-container">
<div class="form-container">
<div class="input-container">
<div class="input-container-to">
<input type="text" class="input input-from" placeholder="From">
<div class="nearest-container nearest-container--hidden">
<div class="stations-container">
<p class="finding">Finding stations closest to you...</p>
<!-- stations here-->
<div class="nearest-station" data-code="Leigh-on-Sea">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Leigh-on-Sea</span>
<span class="station-distance">0.6km</span>
</div>
<div class="nearest-station" data-code="Chalkwell">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Chalkwell</span>
<span class="station-distance">1.5km</span>
</div>
<div class="nearest-station" data-code="Westcliff">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Westcliff</span>
<span class="station-distance">2.7km</span>
</div>
<div class="nearest-station" data-code="Southend Central">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Southend Central</span>
<span class="station-distance">3.6km</span>
</div>
<div class="nearest-station" data-code="Southend Victoria">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Southend Victoria</span>
<span class="station-distance">3.8km</span>
</div>
</div>
<div class="stations-show-more">
<!--
<p class="show-more">Show more stations</p> -->
</div>
</div>
</div>
<div class="input-container-to">
<input type="text" class="input input-to" placeholder="To">
</div>
</div>
<div class="switch-container">
<input type="button" class="button button-switch">
</div>
</div>
<div class="button-search-container">
<input type="button" class="button button-search" value="Search">
</div>
</div>
</div>
Using setTimeout in the inputToFocusOut() function is indeed the correct way to obtain the desired effect: hiding of the menu must be delayed so that a click on a menu item will register and its callback will fire. There should be nothing hit and miss about it, just set the delay at a reasonable value, say 300ms, and remove the hiding of the menu from the addToInputFrom() callback. Actually, you can remove all of the latter function's class-toggling calls, as they are redundant there and may interfere. The menu will be shown/hidden by virtue of inputFrom gaining/losing focus.
BTW, why are you using focusout and not blur?
Using focusout event here
inputFrom.addEventListener("focusout", inputToFocusOut, false);
is not right. Because it will be triggered before click event.
When the function inputToFocusOut is executed the .nearest-container becomes hidden:
nearestContainer.classList.add("nearest-container--hidden");
and that's why click event for it and all of its child nodes (we are interested in .nearest-station elements) won't be triggered. Instead of focusout, use mousedown event. With blur event it won't work.
This is my html:
<div class="button"></div>
<div class="wrapper>
<div class="something">Hello</div>
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
By clicking the div "button", I want to add the class "active" to the first div with class name "box". If I clicking the button again, I want to remove the class "active" from box 1 and add it to box 2. Aso.
Later, if box 3 has the added class name "active" and I press the div "button" again, it should start from the beginning.
I try something like this, but it fails:
$(".button").click(function() {
$(this).find(".wrapper").add(".box").toggleClass("active");
});
You'll need to use css :eq() selector or .eq() on jquery
$(document).ready(function(){
var index = 0; // define index for the first box
$('.button').on('click',function(){
$('.wrapper .box').removeClass('active'); // remove class active from all box divs
$('.wrapper .box:eq('+index+')').addClass('active'); // add class active to the box index we need
index = (index < $('.wrapper .box').length - 1) ? index +1 : 0; // if index = the number of box divs add + 1 if not return it back to 0
}).click(); // if you need to run it onload add .click()
});
.active{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click</div>
<div class="wrapper">
<div class="something">Hello</div>
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
You can try something like this:
jQuery(".button").click(function(){
var active = jQuery(".wrapper").children(".active").first();
if (!active.length)
jQuery(".wrapper").children(":first").addClass("active");
else{
active.removeClass("active");
if (active[0] != jQuery(".wrapper").children(":last")[0])
active.next().addClass("active");
else
jQuery(".wrapper").children(":first").addClass("active");
}
});
.button {
width: 150px;
height: 50px;
cursor: pointer;
background-color: blue;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-style: solid;
border-width: 0.5px;
border-radius: 9px;
position: relative;
left: 30%;
}
.wrapper {
margin-top: 20px;
margin-left: 30px;
background-color: white;
width: 450px;
height: 550;
text-align: center;
border-style: dashed;
}
.active {
background-color: grey;
}
.something {
margin-bottom: 8px;
margin-top: 8px;
}
.box {
margin-bottom: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<p>Press Me</p>
</div>
<div class="wrapper">
<div class="something">Hello</div>
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
Some fun with generator functions :)
let box = 0;
$('.button').on('click', function() {
const boxes = document.querySelectorAll('.box'); // get all boxes
let iter = activateBox(box, boxes); // create itarator to go over boxes
$('.box').removeClass('active'); // remove any active class from all boxes
iter.next(box++).value.classList.add('active'); // add active class to the next box in line
if (box === boxes.length) box = 0; // reset counter if last box reached
});
function* activateBox(i, boxes) {
yield boxes[i];
}
body {
font-family: 'Arial', sans-serif;
}
.button {
display: inline-block;
padding: 8px;
border: 2px solid lightblue;
border-radius: 4px;
color: #444;
cursor: pointer;
transition: background .15s ease-out;
}
.button:hover {
background: lightblue;
color: #FFF;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background: #FFF;
margin: 8px 0;
border: 2px solid lightblue;
border-radius: 4px;
}
.box.active {
background: lightblue;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Apply Active</div>
<div class="wrapper">
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
I have a page where multiple div and within each div there is a option to click and toggle the information, I am able to create by defining different IDs of DIV but I think that can be done somehow dynamically, here is what I have created in JSFiddle
CSS
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
HTML
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
JQuery
$('#button1').click(function () {
$("#content1").slideToggle(200);
});
$('#button2').click(function () {
$("#content2").slideToggle(200);
});
Check this:
$('.boxwrap > a').click(function () {
$(this).next().slideToggle(200);
});
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
The previous answers rely on the fact that the DOM is going to remain the same and the next() element after the button will always be the content div.
For a more robust solution, I would add a class to the buttons in the boxwrap(i.e. .boxbtn) and a class to the content divs (i.e. boxcontent) and then I would do something like the following:
$('.boxbtn').click(function () {
$(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200);
});
Try this way,
It's better to specify the element with it's parent on which you're calling a click event.
$('.boxwrap > a').click(function(){
$(this).next('div').slideToggle(200);
});
Here with 2 options
using relative attribute value
using finding relative don element
/*$('.toggle_link').click(function () {
$($(this).data('toggle')).slideToggle(200);
});
OR
*/
$('.toggle_link').click(function () {
$(this).parent().find('.noDisplay').slideToggle(200);
});
.boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;}
.boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;}
.noDisplay{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
This simple function I've done does not seem to want to play ball; anyone have any ideas?
The error I'm also getting is:
Uncaught TypeError: Cannot read property 'top' of undefined
Does not scroll or show hidden div I've asked for.
$(document).ready(function() {
// show examples
$(document).on("click",".show-syntax",function(e){
$(this).next(".render-syntax").show();
$('html,body').animate({ scrollTop: $(this).next(".render-syntax").offset().top}, 'slow');
e.preventDefault();
});
});
/**
* GitHub theme
*
* #author Craig Campbell
* #version 1.0.4
*/
pre {
border: 1px solid #ccc;
word-wrap: break-word;
padding: 6px 10px;
line-height: 19px;
margin-bottom: 20px;
position: relative;
}
code {
border: 1px solid #eaeaea;
margin: 0px 2px;
padding: 0px 5px;
font-size: 12px;
}
pre code {
border: 0px;
padding: 0px;
margin: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
pre, code {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
color: #333;
background: #f8f8f8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
pre, pre code {
font-size: 13px;
}
pre .comment {
color: #998;
}
pre .support {
color: #0086B3;
}
pre .tag, pre .tag-name {
color: navy;
}
pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function {
font-weight: bold;
}
pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace {
color: #333;
}
pre .constant.numeric, pre .keyword.unit, pre .hex-color {
font-weight: normal;
color: #099;
}
pre .entity.class {
color: #458;
}
pre .entity.id, pre .entity.function {
color: #900;
}
pre .attribute, pre .variable {
color: teal;
}
pre .string, pre .support.value {
font-weight: normal;
color: #d14;
}
pre .regexp {
color: #009926;
}
pre .btn {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
display: block;
padding: 5px 10px;
top: 0;
right: 0;
position: absolute;
background: #eee;
text-decoration: none;
color: #333;
}
.render-syntax {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre>
Show below example
<code data-language="html">
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
</code>
</pre>
<div class="render-syntax">
<div class="container demo">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
</div>
.next will get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector. In this case it is the 'code' tag.
This is what I would do. Wrap a div around the entire section like so:
<div class="parentcontainer">
<pre>
Show below example
<code> ... </code>
</pre>
<div class="render-syntax">
...
</div>
</div>
And then your jQuery would look like this.
$(document).on("click",".show-syntax",function(e){
$next = $(this).parents(".parentcontainer").find('.render-syntax');
$next.show();
$('html,body').animate({ scrollTop: $next.offset().top},'slow');
e.preventDefault();
});
Here is a working fiddle.