Как получить элемент до и после класса, используя JavaScript в HTML?

Question

Я застрял с простой функцией.

Скажем, в качестве примера структуры HTML:

<button class="accordion" onclick="myfunction-show-hide()">show or hide</button>
<div class="inner"style="display:none"> What I want to show/hide>
<button class="accordion" onclick="myfunction-hide()">hide</button>
</div>

Я хочу построить функцию myfunction-show-hide(), которая выбирает NEXT div класса inner и изменяет его отображение на '', если оно было none, и на none, если оно было ''.

И обратная функция, действующая на PREVIOUS divкласса inner.

Звучит очень просто, но я застрял!

Спасибо за вашу помощь.

***** неработающий код ниже ****

    <button class="accordion" onclick="myfunction-show-hide()">show or hide</button>
<div class="inner"style="display:none"> What I want to show/hide>
<button class="accordion" onclick="myfunction-hide()">hide</button>
</div>

<script

  function myfunction-show-hide(){
    var x =  this.nextElementSibling;
    if (x.style.display == "none")
    {x.style.display = "";}
    else
    {x.style.display = "none"}

}
function myfunction-hide(){
    this.prev().hide(); 

}</script>

Еще один не работает:

function myfunction_show_hide(){
$(this).next().toggle();

}

function myfunction_hide(){
$(this).prev().hide();  

}

Еще один не работает:

<button class="accordion" onclick="Hide()">show or hide</button>
<div class="inner" style="display:none">
What I want to show-hide 
<button class="accordion" onclick="Hide">hide</button>
</div>

<script
function Hide()
{
var elements = document.getElementsByClassName("inner");
var requiredElement = elements[0];

var style = requiredElement.getAttribute("style");
if(style != "display:none")
    requiredElement.setAttribute('style', 'display:none');
}

}</script>

Answer 1

Я думаю, что это поможет вам:

function myfunction_show_hide(){
	$(this).next().toggle();
}

function myfunction_hide(){
	$(this).prev().hide();	
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

  <button class="accordion" onclick="myfunction_show_hide()">show or hide</button>
<div class="inner"> What I want to show/hide</div>
<button class="accordion" onclick="myfunction_hide()">hide</button>