I've a few divs which need to be swapped on click of the corresponding buttons.
<html>
<head>
<style>
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
</style>
<script src="css/jquery-3.2.0.js"></script>
</head>
<body>
<div class="container">
<div class="box" id="one">
<p>one</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="two">
<p>two</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_top()">Swap with top!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
</div>
</body>
</html>
For e.g., when I click on Swap with right in div one, it should swap div one and div 2 visually as well as in the DOM it should change to -
<div class="container">
<div class="box" id="two">
<p>two</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="one">
<p>one</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_top()">Swap with top!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
</div>
Likewise, how would I also achieve the same for swapping with any of the left, top, down divs?
Basically, using insertBefore/After will not swap the divs, but move them along, this can be demonstrated by using your current method
$(toMove1).insertAfter($(toMove1).next());
To get the top left div to swap with the one below you could expand on this and use
$(toMove1).insertAfter($(toMove1).next().next());
But this would only move div 'one' to the place of div 'three'. Then div 'two' would fall into div 'one's slot, and 'three' into 'two's.
However, once a div has been moved what happens next?
For example, if you keep clicking 'Swap with right' should it swap with the div below and to the left, should it re-label the button to 'Swap with left'?
I have added four positional divs (with a 'parent' class), so you can move the divs you want in the DOM, and also use rules for labels etc. within each area. I've demonstrated using 'topLeft', 'bottomRight' etc. but you could have an array of many different positions and use indexes if you want.
The code below can be refactored to selectively update event handlers, label changing, and code reduction, but to make it easy to see what is happening I have left it pretty verbose.
<html>
<head>
<style>
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="topLeft" class="parent">
<div class="box" id="one">
<p>one</p>
<button class="right">Swap with right!</button>
<button class="down">Swap with down!</button>
</div>
</div>
<div id="topRight" class="parent">
<div class="box" id="two">
<p>two</p>
<button class="left">Swap with left!</button>
<button class="down">Swap with down!</button>
</div>
</div>
<div id="bottomLeft" class="parent">
<div class="box" id="three">
<p>three</p>
<button class="right">Swap with right!</button>
<button class="top">Swap with top!</button>
</div>
</div>
<div id="bottomRight" class="parent">
<div class="box" id="four">
<p>four</p>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
</div>
</div>
</div>
<script>
$(document).ready(function () {
// Set the event handlers on load...
resetEvents();
});
function UpdateDivs(parent1, parent2, class1, class2) {
var parent1Content = $('#' + parent1).children();
var parent2Content = $('#' + parent2).children();
$(parent1Content).find('.' + class1).each(function () {
swapButtonClass(this);
});
$(parent2Content).find('.' + class2).each(function () {
swapButtonClass(this);
});
$('#' + parent1).append(parent2Content);
$('#' + parent2).append(parent1Content);
resetEvents();
}
function resetEvents() {
// Clear the current handlers - because the buttons will change their class.
// The handlers are still attached to the buttons that were seen with that class initially.
// This could be done selectively, but for demo purposes, just resets all of them when the DOM is changed.
$('.right').unbind('click');
$('.left').unbind('click');
$('.top').unbind('click');
$('.down').unbind('click');
$('.right').click(function () {
var parent1 = $(this).parents('.parent').attr('id');
var parent2 = parent1.replace('Left', 'Right');
UpdateDivs(parent1, parent2, 'right', 'left');
});
$('.left').click(function () {
var parent1 = $(this).parents('.parent').attr('id');
var parent2 = parent1.replace('Right', 'Left');
UpdateDivs(parent1, parent2, 'left', 'right');
});
$('.down').click(function () {
var parent1 = $(this).parents('.parent').attr('id');
var parent2 = parent1.replace('top', 'bottom');
UpdateDivs(parent1, parent2, 'down', 'top');
});
$('.top').click(function () {
var parent1 = $(this).parents('.parent').attr('id');
var parent2 = parent1.replace('bottom', 'top');
UpdateDivs(parent1, parent2, 'top', 'down');
});
$('.container').eq(0);
}
function swapButtonClass(button) {
// Swap class and labels when moving the divs around.
switch (button.className) {
case "right":
$(button).removeClass('right').addClass('left').text($(button).text().replace('right', 'left'));
break;
case "left":
$(button).removeClass('left').addClass('right').text($(button).text().replace('left', 'right'));
break;
case "top":
$(button).removeClass('top').addClass('down').text($(button).text().replace('top', 'down'));
break;
case "down":
$(button).removeClass('down').addClass('top').text($(button).text().replace('down', 'top'));
break;
}
}
</script>
</body>
</html>
It seems you have created multiple questions for this issue :).
I answered your previous question here.
jsfiddle here
Code
function resetButtons() {
// enable and show all buttons
$("button").prop("disabled", false).show();
// First box (top left), disable and hide top and left
var firstBox = $(".box").eq(0);
firstBox.find(".top").prop("disabled", true).hide();
firstBox.find(".left").prop("disabled", true).hide();
// Second box (top right), disable and hide top and right
var secondBox = $(".box").eq(1);
secondBox.find(".top").prop("disabled", true).hide();
secondBox.find(".right").prop("disabled", true).hide();
// Third box (bottom left), disable and hide down and left
var thirdBox = $(".box").eq(2);
thirdBox.find(".down").prop("disabled", true).hide();
thirdBox.find(".left").prop("disabled", true).hide();
// Fourth box (bottom right), disable and hide down and right
var fourthBox = $(".box").eq(3);
fourthBox.find(".down").prop("disabled", true).hide();
fourthBox.find(".right").prop("disabled", true).hide();
}
For swapping, we will play with array-index of the boxes and swap the html content of each box.
function swapContent(divA, divB) {
var tempDiv = divA.html();
divA.html(divB.html());
divB.html(tempDiv);
}
For example, right button will swap current box and the one next to it (on its right).
$(".container").on("click", ".right", function(e) {
var currentBox = $(this).parents('.box');
var currentIndex = $(".box").index(currentBox);
console.log(currentIndex, "right", currentBox);
swapContent(
currentBox,
$(".box").eq(currentIndex+1)
);
resetButtons();
});
Ok, I've got this to work for swapping with left & right divs.
Now, stuck with top and down!
Here's my updated code.
<html>
<head>
<style>
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="box" id="one">
<p>one</p>
<button class="right">Swap with right!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="two">
<p>two</p>
<button class="left">Swap with left!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button class="right">Swap with right!</button>
<button class="top">Swap with top!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button class="left">Swap with left!</button>
<button class="down">Swap with down!</button>
</div>
</div>
<script>
$(document).ready(function() {
$('.right').click(function(){
//alert('ok');
var toMove1 = $(this).parents('.box');
//toMove2 = toMove1.next();
$(toMove1).insertAfter($(toMove1).next());
});
$('.left').click(function(){
//alert('ok');
var toMove1 = $(this).parents('.box');
//toMove2 = toMove1.prev();
$(toMove1).insertBefore($(toMove1).prev());
});
$('.container').eq(0);
/*
$('.down').click(function(){
//alert('ok');
toMove1 = $(this).parents('.box');
//toMove2 = toMove1.prev();
var toMove2 = $(toMove1).insertAfter($(toMove1).next());
$(toMove2).insertAfter($(toMove2).next());
});
$('.top').click(function(){
//alert('ok');
toMove1 = $(this).parents('.box');
//toMove2 = toMove1.prev();
$(toMove1).insertAfter($(toMove1).prev());
});
$(".box").first().css({"background-color":"yellow"});
$('.box:first-child').eq(3).removeClass('.left');
$('.box:first-child').eq(3).addClass('.right');
*/
});
</script>
</body>
</html>
Also, how do I ensure that the button swap with right changes to swap with left if it's a right element and similarily, changes accordingly for each button, when a div is swapped?
Related
The intension is to have a two column accordion, without limiting the "expand" field to the left or right column. The catch is that there will be multiple on one page. This is already created, but only button 1 is working. With the way my JS is going, it will get very very repetitive - I am looking for assistance with re-writing the JS to be multiple click friendly. Fiddle: https://codepen.io/ttattini/pen/abLzaaY
EDIT: It would also be perfect if one dropdown would close as the next is opened
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row">
<div id="column">
<button id="button">I am Button #1</button>
<button id="button">I am Button #3</button>
</div>
<div id="column">
<button id="button">I am Button #2</button>
<button id="button">I am Button #4</button>
</div>
</div>
<div id="hidden">
<p id="content"> So here I am #1</p>
</div>
<div id="hidden">
<p id="content"> So here I am #2</p>
</div>
<div id="hidden">
<p id="content"> So here I am #3</p>
</div>
<div id="hidden">
<p id="content"> So here I am #4</p>
</div>
CSS
#hidden {
background: #ccc;
margin-top: 2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
#button {
padding: 10px;
margin-top: 5px;
width:50%;
margin-left: 10%;
cursor: pointer;
}
#row {
display: flex;
}
#column {
flex: 50%;
}
JS
$(function() {
var b = $("#button");
var w = $("#hidden");
var l = $("#content");
b.click(function() {
if (w.hasClass('open')) {
w.removeClass('open');
w.height(0);
} else {
w.addClass('open');
w.height(l.outerHeight(true));
}
});
});
The biggest issue is that you're using IDs when you should be using classes. IDs must be unique to each element in a page. When you repeat an ID, JS will only target the first element using that ID. That's why only the first one is working.
The second issue is that, because of the way the script is written, it will only target a single element. What you need to do is get all the elements you want to target by something like their class name and then loop through them, applying the event listener to each one and its appropriate children.
EDIT: Here is an example from some code I wrote for a page with multiple accordions a few weeks ago in vanilla JS
//Below I establish a counting variable and find all the accordions on the page
const acc = document.getElementsByClassName( 'accordion' );
let i;
//Looping through each accordion
for ( i = 1; i <= acc.length; i++ ) {
//Identify target for the event listener. In this case, a heading for each accordion, which I've numbered e.g. "title-1"
const title = 'title-' + i;
const label = document.getElementById( title );
//Identify target content, in this case a list that has a unique ID e.g. "list-1"
const listNum = 'list-' + i;
const list = document.getElementById( listNum );
//Add event listener to heading that toggles the active classes
label.addEventListener( 'click', function() {
label.classList.toggle( 'accordion--active' );
});
}
Of course, there's more than one way to skin a cat, but this is a working example.
I have tracked the clicked event of each button and showed the corresponding hidden content with the use of data- attribute.
I have used vanilla JavaScipt instead of jQuery.
const buttons = document.querySelectorAll('.button');
const hiddens = document.querySelectorAll('.hidden');
buttons.forEach((btn) => {
btn.addEventListener('click', btnClicked)
function btnClicked(e) {
hiddens.forEach((hidden) => {
if(e.target.dataset.btn == hidden.dataset.content) {
hidden.classList.toggle('height')
} else {
hidden.classList.remove('height')
}
})
}
})
.hidden {
background: #ccc;
margin-top: 2%;
padding-left:2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
.hidden.height {
height: 50px;
}
.button {
padding: 10px;
color: white;
background-color: #2da6b5;
border: none;
margin-top: 5px;
width:90%;
margin-left: 5%;
cursor: pointer;
}
.button:hover {
filter: brightness(.9);
}
#row {
display: flex;
}
.column {
flex: 50%;
}
<div id="row">
<div class="column">
<button class="button" data-btn="one">I am Button #1</button>
<button class="button" data-btn="three">I am Button #3</button>
</div>
<div class="column">
<button class="button" data-btn="two">I am Button #2</button>
<button class="button" data-btn="four">I am Button #4</button>
</div>
</div>
<div class="hidden" data-content="one">
<p class="content"> So here I am #1</p>
</div>
<div class="hidden" data-content="two">
<p class="content"> So here I am #2</p>
</div>
<div class="hidden" data-content="three">
<p class="content"> So here I am #3</p>
</div>
<div class="hidden" data-content="four">
<p class="content"> So here I am #4</p>
</div>
Also, please do not use the same ID at multiple elements.
I am trying to practice some things on JS, I want to toggle a number of divs on click to change their color but I can't seem to target correctly the first one. It was fine when I did it by tag name but by class it doesnt seem to work. What am I doing wrong? Thanks!
EDIT. This is what my code looks like after your corrections.
<body>
<div class="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
<script src="script.js"></script>
</body>
let boxOne = document.getElementsByClassName("one")[0]
boxOne.onclick = function() {
alert("Clicked!")
}
I'm going to add that its better to assign an id and use getElementById if the selector is only used by one element.
let boxOne = document.getElementById("one");
let allBoxes = document.getElementsByClassName("square");
boxOne.onclick = function() {
alert("Clicked via ID");
}
const arr = [1, 2, 3];
arr.forEach(i => {
allBoxes[i].onclick = function() {
alert("Clicked via Class");
}
})
.square {
width: 100px;
height: 100px;
background: blue;
margin: 20px;
font-size: 50px;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
}
<body>
<div class="container">
<div class="square" id="one">
1
</div>
<div class="square" id="two">
2
</div>
<div class="square" id="three">
3
</div>
<div class="square" id="four">
4
</div>
</div>
</body>
With this line:document.getElementsByClassName(".one")[0]
you are already targeting the div, so change out this:
boxOne[0].onclick =
to this:
boxOne.onclick =
document.
getElementsByClassName returns array of elements with that className (without dot)
querySelector is used for css selectors (eg. ".one", "div.one")
querySelectorAll like 2. but returns array
let boxOne = document.getElementsByClassName("one")[0]
boxOne.onclick = function() {
alert("Clicked!")
}
div {
width: 100px;
height: 100px;
margin: 30px;
background: blue
}
<body>
<div class="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
<script src="script.js"></script>
</body>
I am trying to add a class when you click on a box then remove the class when you click the button. But no class os added or removed.
var leftBox = document.getElementsByClassName("left");
var rightBox = document.getElementsByClassName("right");
function expandLeft() {
leftBox.className = leftBox.className + "zero-width";
rightBox.className = rightBox.className + "full-width";
}
function expandRight() {
leftBox.className = leftBox.className + "full-width";
rightBox.className = rightBox.className + "zero-width";
}
function originalLeft(){
leftBox.removeClass(leftBox, "zero-width");
rightBox.removeClass(rightBox, "full-width");
}
function originalRight(){
leftBox.removeClass(rightBox, "full-width");
rightBox.removeClass(leftBox, "zero-width");
}
<div class="row">
<div class="wrapper flex full-width">
<div class="form_wrapper flex full-width">
<div class="left">
<div class="form_wrapper--left" onclick="expandRight()">
<div><button id="shrink" onclick="originalLeft()">click here</button> .
</div>
</div>
</div>
<!-- END OR RIGHT BOX --
<!-- START OR RIGHT BOX -->
<div class="right">
<div class="form_wrapper--right" onclick="expandLeft()">
<div>
<button id="shrink" onclick="originalLeft()">click here</button>
</div>
</div>
</div>
<!--- END of Right Box --->
</div>
</div>
</div>
The effect should be that when you click one box it expands left and you can click a button and it returns. Vice versa for the other side.
You can use .toggleClass() in jQuery.
maybe this link helps:
https://api.jquery.com/toggleclass/
try this:
document.getElementById("test").addEventListener("click", enlarge);
document.getElementById("btn").addEventListener("click", resume);
function enlarge() {
document.getElementById("test").classList.add("enlarge");
}
function resume() {
document.getElementById("test").classList.remove("enlarge");
}
#test {
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 20px;
}
.enlarge {
transform: scaleX(2);
}
<div id="test"></div>
<button id="btn">
Resume
</button>
I am trying to use jQuery ready function for multiple ids so that they show and hide individually without writing the same type again and again. When I try to use it on the same line it opens all the drawings all together. The code looks something like this-
<script type="text/javascript">
$(document).ready(function(){
$('#p1','#p2', '#p3','#p4').hide();
$('#p1-show','#p2-show','#p3-show','#p4-show').click(function(){
$('#p1','#p2','#p3','#p4').show();
});
$('#p1-hide','#p2-hide','#p3-hide','#p4-hide').click(function(){
$('#p1','#p2','#p3','#p4').hide();
});
});
</script>
Your function hides all of them. If you want to hide the drawing based on which show/hide button is clicked, you can use $(this) to find the corresponding drawing.
The exact code will depend on how your elements are structured, but the idea is to use $(this) to target the element that was clicked, and from there find the element you want to hide.
Here's an example:
$(document).ready(function(){
$('#p1, #p2, #p3, #p4').hide();
$('#p1-show, #p2-show, #p3-show, #p4-show').click(function(){
$(this).parent().find('p').show();
});
$('#p1-hide, #p2-hide, #p3-hide, #p4-hide').click(function(){
$(this).parent().find('p').hide();
});
});
div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 10px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="p1">First Drawing</p>
<button id="p1-show">Show</button>
<button id="p1-hide">Hide</button>
</div>
<div>
<p id="p2">Second Drawing</p>
<button id="p2-show">Show</button>
<button id="p2-hide">Hide</button>
</div>
<div>
<p id="p3">Third Drawing</p>
<button id="p3-show">Show</button>
<button id="p3-hide">Hide</button>
</div>
<div>
<p id="p4">Fourth Drawing</p>
<button id="p4-show">Show</button>
<button id="p4-hide">Hide</button>
</div>
The previous answers will work, but in case there are many such drawings then giving an #id to all those becomes badly repetitive and should be avoided. Following is a code snippet to make it more robust without much hard coded #ids.
$(function(){
$('.toggle-btn').on('click', function(){
var root = $(this).closest(".picture-container");
var img = $(root).find("img");
$(img).toggle();
});
});
body > div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>
You really don't need all of these selectors you have. It's overkill.
You should have your markup all the same for each 'drawing' it makes replication of this 'module' much easier for you also.
$(document).ready(function(){
//this hides all of your <p> on page load
$('p').hide();
//this adds the click event to all the buttons with 'show'
$('.show').on('click', function(){
$(this).parent().find('p').show();
});
$('.hide').on('click', function(){
$(this).parent().find('p').hide();
})
});
div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 10px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>1st Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>2nd Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>3rd Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>4th Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>5th Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
i am making a kind of storyboard where you can add and remove frames but i need to set divs next to each other, the code i now have it places the div's beneath each other. I want to make it with a loop
Here is my code:
HTML
<div id="storyboard">
<div id="container">
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
<div type="button" value="fade_in" class="add__button"> + </div>
</div>
</div>
</div>
</div>
JS
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').after('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};
Use append() instead of after() function. This should work:
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};
This works for keeping one .frame element and adding multiple divs to it of the structure:
<div class="container[i]">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
</div>
</div>
If you want to arrange elements side by side which normaly are block elements and thus are positioned underneath eachother by default use either css floats or css flexbox.
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
i need to set divs next to each other
Try this example to add new story container to all current .container
var i = 1;
$('.add__button').click(function() {
i++;
$(".container").each(function(x) {
$(this).after('<div id="container' + x + '_' + i + '" class="container"><div class="frame"><div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content">story ' + i + '</div></div></div></div>');
});
});
.frame__outer {
padding: 20px;
background: #222;
color: white;
border-bottom: solid 3px green;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="storyboard">
<input type='button' value='add story' class="add__button" />
<div id="container" class='container'>
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content">story 1</div>
</div>
</div>
</div>
</div>