brandonstiles brandonstiles - 6 months ago 26
jQuery Question

How to prevent icons from jumping down when sliding in a paragraph (jQuery)

Actually, this makes my question a lot more clear:

SETUP: I have 8 clickable icons. On bigger screens, they're grouped three in a row, three in a row, then 2 in a row. On mobile screens, the icons are one on top of the other, vertically. See this as an example: http://winter-construction.com/services/

PROBLEM: When I click an icon, I want a paragraph to toggle in explaining the icon. However, here's the catch: On mobile screens, I want the individual paragraph to toggle in below each individual icon. On bigger screens, I want the individual paragraph to toggle in below the row of icons, so they don't move around a lot.

How can I do this?? Would I append it to the icon in small screens, and append it to the row div in big screens? Code below:

HTML:

<!--------------- Services ----------------------------->
<!----- ROW 1 ----->
<div class="row col-xs-12">
<!--- ICON 1 ----->
<div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption1">
<a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
<h5>Icon 1</h5>
</div>
<!--- ICON 2 ----->
<div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption2">
<a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
<h5>Icon 2</h5>
</div>
<!--- ICON 3 ----->
<div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption3">
<a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
<h5>Icon 3</h5>
</div>
</div>

<!--- ROW 2 ----->
<div class="row col-xs-12">
<!--- ICON 4 ----->
<div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
<a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
<h5>Icon 4</h5>
</div>
<!--- ICON 5 ----->
<div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
<a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
<h5>Icon 5</h5>
</div>
<!--- ICON 6 ----->
<div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
<a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
<h5>Icon 6</h5>
</div>
</div>

<!----- ROW 3 ------->
<div class="row">
<!--- ICON 7 ----->
<div class="col-sm-4 col-sm-offset-1 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
<a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
<h5>Icon 7</h5>
</div>
<!--- ICON 8 ----->
<div class="col-sm-4 col-sm-offset-1 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
<a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
<h5>Icon 8</h5>
</div>
</div>

<div id="iconParagraphs" class="col-xs-10 col-xs-offset-1 p-t-1">
<div class="serviceOption1 text"> Text 1 </div>
<div class="serviceOption2 text"> Text 2 </div>
<div class="serviceOption3 text"> Text 3 </div>
<div class="serviceOption4 text"> Text 4 </div>
<div class="serviceOption5 text"> Text 5 </div>
<div class="serviceOption6 text"> Text 6 </div>
<div class="serviceOption7 text"> Text 7 </div>
<div class="serviceOption8 text"> Text 8 </div>
</div>


Here's the CSS (just hides the paragraphs):

.text{


display: none;
}

and my JQuery skeleton. This might not be the quickest way, so if there's something faster, let me know:

// When screen is less than 544 px, or 'mobile':
// When icon is clicked,
$('a').click(function(){
// Get div with matching class of this element's ID
// Append that div after this anchor element
// When screen is 544px or greater:
// When icon is clicked,
// Get div with matching class of this element's ID
// Append it after this anchor element's row
}); // end SERVICES function

Answer

I have modified your fiddle: https://jsfiddle.net/v0rhknmw/20/

I have added two div with class block. This contain a number of icon you want. After, i have created one div contain all your text you will appear below your icon.

It's a little ugly but it's work fine.

Please try:

$('.m-b-2').click(function(){
  $.each($("#serviceOptionParagraph").find(".blockText"),function(){
    $(this).hide()
  })
  $(this).closest(".block").after($("#serviceOptionParagraph").show())
  $("#serviceOptionParagraph").find("."+$(this).attr("id")).show()
});
/*--------------- Services Icons --------------------*/
i{
    cursor: pointer;
}

#serviceOptionParagraph{
    border: 1px solid #FF3B17;
    border-radius: 5px;
    padding: 3%;
    display: none;
}
.serviceOptionParagraph{
  display:none;
  
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="col-md-4 col-xs-6 text-xs-center m-b-2" id="serviceOption1">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 1</h5>
  </div>
  <div class="col-md-4 col-xs-6 text-xs-center m-b-2" id="serviceOption2">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 2</h5>
  </div>
  <div class="col-md-4 col-xs-6 text-xs-center m-b-2" id="serviceOption3">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 3</h5>
  </div>
</div>
<div class="block">
  <div class="col-md-4 col-xs-6 text-xs-center m-b-2" id="serviceOption4">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 4</h5>
  </div>
</div>
<div id="serviceOptionParagraph" class="col-xs-10 col-xs-offset-1 p-t-1">
  <div class="serviceOption1 blockText"> 
    <img width="50%" src="http://cdn.winter-construction.com/wp-content/uploads/BIM-ReptileHouse1.jpg" >
  </div>
  <div class="serviceOption2 blockText"> Text 2</div>
  <div class="serviceOption3 blockText"> Text 3</div>
  <div class="serviceOption4 blockText"> Text 4</div>
</div>