We Keep Coding

jQuery slideToggle first of class below

Here is my HTML:
<div class="row header collapse">
Content 1
<i class="fas fa-chevron-circle-up" ></i>
</div>
<div class="instructions-container">
<div></div>
<div></div>
</div>
<div class="row header collapse">
Content 2
<i class="fas fa-chevron-circle-up" ></i>
</div>
<div class="instructions-container">
<div></div>
<div></div>
</div>
Basically, I have multiple instances of this setup on one page, but on click of .collapse, I want to slideToggle ONLY the .instructions-container that is directly below the clicked collapse button.
I'd also like to toggle rotate the .fa-chevron-cirle-up 180 degrees on click as well, but again, only this clicked one.
Here is the current jQuery:
$(document).ready(function () {
$('.collapse').click(function () {
$(this).find('.instructions-container').slideToggle();
});
});

I figured out the first half with the code below:
$(document).ready(function () {
$('.collapse').click(function () {
$(this).next().slideToggle();
});
});

Click button, show div content, hide others - JS

I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.

Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY

Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');

TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>

Javascript hide/show div

I have a javascript hide/show div with 4 different divs going. It is working partially but not performing the way I would like. When I click one of the divs it opens up the hidden div, which is perfect, but when I click the other link to open up the other div I want the other one I clicked first to close and then the new one to open. Here is my javascript.
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggle('hide');
});
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb">
<hr class="dark2">
<p></p>Whats in the Bag <i class="fa fa-angle-down" style="font-size:24px"></i></p>
</div>
</div></a>
<div id='content2' style="display:none">
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
</div>

// Hopefully you have some selector reference to target them all
var $all = $(".drops"); // Clearly I used .drops for example
$('[data-value]').on('click', function(event) {
var $target = $('#'+ this.dataset.value);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
Here's an improved example:
var $all = $(".togglable");
$('[data-toggle]').on('click', function(event) {
var $target = $(this.dataset.toggle);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;}
.hidden{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="#el1">TOGGLE1</a>
<a data-toggle="#el2">TOGGLE2</a>
<a data-toggle="#el3">TOGGLE3</a>
<div id="el1" class="togglable hidden">ELEMENT1</div>
<div id="el2" class="togglable hidden">ELEMENT2</div>
<div id="el3" class="togglable hidden">ELEMENT3</div>

Please try this
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});

It will be better if you could give your divs a common class instead of ids so you could hide other divs using this common class like :
$('.common_class').addClass('hide');
If you cant you could loop through all the divs and hide them before showing the current clicked one :
$('[id^="hideshow"]').on('click', function(event) {
$('[id^="hideshow"]').each(function(){
$('#'+$(this).data('value')).addClass('hide');
});
dataValue_id = $('#'+$(this).data('value'));
$(dataValue_id).toggleClass('hide');
});
Hope this helps.
Snippet using common classes :
$('.common_class').on('click', function(event) {
$('.common_class_2').not($('.common_class_2', this)).addClass('hide');
$('.common_class_2', this).toggleClass('hide');
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='common_class'>DIV 1
<p class='common_class_2'>Content 1</p>
</div>
<div class='common_class'>DIV 2
<p class='common_class_2 hide'>Content 2</p>
</div>
<div class='common_class'>DIV 3
<p class='common_class_2 hide'>Content 3</p>
</div>
<div class='common_class'>DIV 4
<p class='common_class_2 hide'>Content 4</p>
</div>

jquery open div with dynamic id

I want to use jQuery to open and close a div.
But because the code that I use is dynamic and will be repeated below each other, I need to use a dynamic id.
HTML:
<div class="categoryratings-review-<?php echo $this->htmlEscape($_review->getId())?>" style="display: none;">
<p>Text</p>
</div>
<span class="showcategoryratings" id="review-<?php echo $this->htmlEscape($_review->getId())?>">
<span class="showcategoryratings-text">Per category</span>
</span>
I try to use this jQuery, but I guess the php line is not working:
$(document).ready(function() {
$('#review-<?php echo $this->htmlEscape($_review->getId())?>').click(function() {
$('.categoryratings-review-<?php echo $this->htmlEscape($_review->getId())?>').slideToggle("fast");
$(this).toggleClass('active');
});
});
How do I need to edit this correctly?

You can do it without PHP in your Javascript.
$(document).ready(function() {
$('.showcategoryratings').click(function() {
var categoryId = $(this).attr('id').split('-')[1];
$('.categoryratings-review-'+categoryId).slideToggle("fast");
$(this).toggleClass('active');
});
});
I think it works.

It'd be easier if you'd grouped your elements like below. By doing so, you don't need IDs at all. Take a look.
$(document).ready(function() {
$('.showcategoryratings').on("click", function() {
$(this).closest(".group").find(".categoryratings-review").slideToggle("fast");
$(this).toggleClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text1</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category1</span>
</span>
</div>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text2</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category2</span>
</span>
</div>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text3</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category3</span>
</span>
</div>

you can hook up all id's that start with review- to respond
$('[id^="review-"]').click(function() {
$( '.categoryratings-' + $(this).attr('id') ).slideToggle('fast') ;
$( this ).toggleClass('active');
});

Minor tweak to this javascript function?

I have a script that shows/hides used via onClick. I can get it to show/hide just fine, but I can't get it to show/'hide everything else'. So what I get is a bunch of open containers when I really want just the one.
Javascript:
<script>
function showfields(fields){
if(document.getElementById(fields).style.display=='none'){
document.getElementById(fields).style.display='block';
}
else{
document.getElementById(fields).style.display = 'none';
}
}
</script>
HTML:
<div id="hidden" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden2');return false;" href="#">Continue</button>
</div>
<div id="hidden2" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something2</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden3" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something3</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden4" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something4</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden4');return false;" href="#">Continue</button>
</div>
Thanks

Since you've tagged this with jQuery I assume that is an option:
function showfields(fields){
$('.steps').hide()
$('#' + fields).show();
}

Edit:
Is this what you're trying to do: http://jsfiddle.net/Rykus0/67cjt/2/
(without jQuery)
(ps - this can be done better)
Your question is not very clear, but I'm guessing that you want the page to start with the everything but the first div hidden.
In that case, what you have is fine, just set style="display:none;" on the elements you don't want to show at first (you can also use a class).
Also, I believe you should change the onclick call on hidden3 to be showfields('hidden4') and remove the onclick event from hidden4

I agree with Porco,
Another option would be using a class as a flag, for example
function showFields(fields){
$(fields).each(function(){
if($(this).hasClass('visible'){
$(this).hide();
}
else {
$(this).show();
}
}
}

Without using jquery .This piece of javascript may help you
<script>
function showfields(fields){
for(var i=0;i<document.body.getElementsByTagName("*").length;i++)
{ if(document.body.getElementsByTagName("*")[i].id==field)
{
document.body.getElementsByTagName("*")[i].style.display='block';
}
else{
document.body.getElementsByTagName("*")[i].style.display='block';
}
}
</script>