Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Angelic Sanoy
6,149 PointsToggle Behavior Inside A Grid
I am trying to create a toggle for my the other navigation http://getrefinanced.com.au/ . Since the icons are set to grid, what I did is change the display to block in jQuery but I don't think it solves the problem because I can't revert it back again to grid once the x icon is click. I hope you can help me. thank you so much!
pic here -> http://prntscr.com/ol6zyd Here's my video for clarification https://www.loom.com/share/89243f7125ab4a8895b8383ed769889a
<b> Update </b> I did convert the css too addclass and but it's still work :( $('#grid_7 >.et_pb_column').addClass('block-grid');
This is my jQuery
<script>
(function($) {
$(document).ready(function() {
$('#btn-others').click(function(){
$('#grid_7 >.et_pb_column').css('display','block');
$('.single-icon').hide();
$('ul#drop-down').toggle('#drop-down');
$("#btn-others").html('<i class="fas fa-times-circle"></i>')
});
});
})(jQuery)
</script>
#btn-others {
padding: 1rem;
text-align: center;
}
.fas , .fa-bars {
color:#0698D7;
font-size:2rem;
}
#drop-down {
display:none;
background:#0698D7;
padding: 1rem;
width:80%;
height:30vh;
margin:0 auto;
box-shadow: 3px 2px 3px rgba(0, 0, 0 , 0.28);
z-index:999;
position:relative;
}
#drop-down li {
list-style: none;
}
#drop-down li a{
color: #fff;
line-height:2;
text-decoration: none;
}
.other-dropDown li a:hover {
background:#136ac2;
padding:7px;
width:100%;
}
#grid_7 >.et_pb_column.block-grid{
display:block;
}
<div id="grid_7" class="et_pb_with_border et_pb_row et_pb_row_1">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child block-grid">
<div class="et_pb_module et_pb_code et_pb_code_2 single-icon et_pb_text_align_center" style="display: none;">
<div class="et_pb_code_inner">
<a href="http://getrefinanced.com.au/free-property-report/"><i class="fas fa-calendar-minus"></i>
<br>
<h3>Book an appointment
</h3></a>
</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code --><div class="et_pb_module et_pb_code et_pb_code_3 single-icon et_pb_text_align_center" style="display: none;">
<div class="et_pb_code_inner">
<a href="http://getrefinanced.com.au/pre-qualify/"><i class="fas fa-calculator"></i>
<br>
<h3>Free Property Report
</h3></a>
</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code --><div class="et_pb_module et_pb_code et_pb_code_4 single-icon et_pb_text_align_center" style="display: none;">
<div class="et_pb_code_inner">
<a href="http://getrefinanced.com.au/pre-qualify/"><i class="fas fa-user-check"></i>
<br>
<h3>Pre-Qualify
Now
</h3></a>
</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code --><div class="et_pb_module et_pb_code et_pb_code_5 single-icon et_pb_text_align_center" style="display: none;">
<div class="et_pb_code_inner">
<a href="http://getrefinanced.com.au/book-a-call"><i class="fas fa-mobile-alt"></i>
<br>
<h3>Book a call
</h3></a>
</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code --><div class="et_pb_module et_pb_code et_pb_code_6 single-icon et_pb_text_align_center" style="display: none;">
<div class="et_pb_code_inner">
<a href="http://getrefinanced.com.au/book-a-call"><i class="fas fa-envelope"></i>
<br>
<h3>Newsletter
</h3></a>
</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code --><div class="et_pb_module et_pb_code et_pb_code_7 single-icon et_pb_text_align_center" style="display: none;">
<div class="et_pb_code_inner">
<a href="http://getrefinanced.com.au/book-a-call"><i class="fas fa-search"></i>
<br>
<h3>Home Loan Check
</h3></a>
</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code --><div id="full-column" class="et_pb_module et_pb_code et_pb_code_8">
<div class="et_pb_code_inner">
<div id="btn-others"><i class="fas fa-times-circle"></i></div>
<ul id="drop-down" style="display: block;">
<li><a href="#">Loan Repayment </a></li><a href="#">
</a><li><a href="#"></a><a href="#"> Calculator Credit Card </a></li><a href="#">
</a><li><a href="#"></a><a href="#"> Calculator More </a></li><a href="#">
</a><li><a href="#"></a><a href="#"> Calculators </a></li><a href="#">
</a></ul><a href="#">
</a></div><a href="#"> <!-- .et_pb_code_inner -->
</a></div><a href="#"> <!-- .et_pb_code -->
</a></div><a href="#"> <!-- .et_pb_column -->
</a></div>
2 Answers
Angelic Sanoy
6,149 PointsI was able to fixed it using this code but just wondering. Is there any way to make this shorter?
<script>
(function($) {
$(document).ready(function() {
$('#btn-others').click(function(){
$('#grid_7 >.et_pb_column').addClass('block-grid');
$('.single-icon').addClass('hide-me');
$('ul#drop-down').toggle('#drop-down');
$('#btn-others').hide();
$('.btn-close').css('display','block');
});
$('.btn-close').click(function(){
$('#grid_7 >.et_pb_column').removeClass('block-grid');
$('#drop-down, .btn-close').hide();
$('#btn-others').show();
$('.single-icon').removeClass('hide-me');
});
});
})(jQuery)
</script>
Angelic Sanoy
6,149 PointsSteven Parker : Thank you for responding back.. The problem is, I am using a theme and there's a lot of extra classes and id added. I am confuse why this part is not running, I event set an alert but no luck -> http://prntscr.com/ol7yn5
PS. I added the html code above
Steven Parker
229,732 PointsSteven Parker
229,732 PointsCan you post the HTML as well to make it possible to replicate the issue? Even better, make a snapshot of your workspace (upload the project into one if needed) and post the link to it here.