Как можно скрыть аккорды или тексты песен на сайте?

Question

[NikolayNB]

Подскажите как можно сделать на сайте такую вещь:



Как они сделали транспозицию аккордов я уже нашел. Они сделали через плагин jQuery Chord Transpose Plugin.
А вот как сделать, чтобы при желании можно было скрыть при желании текст либо аккорды нет.

На том сайте откуда пример, в коде прописано:

a href="javascript:;" class="hidetext">Скрыть текст

a href="javascript:;" class="hidechords">Скрыть аккорды

pre data-key="G#" id="soungchord">
Припев:
G#m G#m H F#/A#
О-о-о-о
C#m G#m H F#/A#
О-о-о-о

Куплет:
/pre>

Из подключенных скриптов которые я нашел на странице сайта я нашел следующие:

Стили:
autoptimize/css/autoptimize_dcb2de333eec7ab4ae31385ed8d6a393.css

s/jquery/jquery.js?ver=1.12.4-wp

<script type="text/javascript">function setREVStartSize(e){									
						try{ e.c=jQuery(e.c);var i=jQuery(window).width(),t=9999,r=0,n=0,l=0,f=0,s=0,h=0;
							if(e.responsiveLevels&&(jQuery.each(e.responsiveLevels,function(e,f){f>i&&(t=r=f,l=e),i>f&&f>r&&(r=f,n=e)}),t>r&&(l=n)),f=e.gridheight[l]||e.gridheight[0]||e.gridheight,s=e.gridwidth[l]||e.gridwidth[0]||e.gridwidth,h=i/s,h=h>1?1:h,f=Math.round(h*f),"fullscreen"==e.sliderLayout){var u=(e.c.width(),jQuery(window).height());if(void 0!=e.fullScreenOffsetContainer){var c=e.fullScreenOffsetContainer.split(",");if (c) jQuery.each(c,function(e,i){u=jQuery(i).length>0?u-jQuery(i).outerHeight(!0):u}),e.fullScreenOffset.split("%").length>1&&void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0?u-=jQuery(window).height()*parseInt(e.fullScreenOffset,0)/100:void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0&&(u-=parseInt(e.fullScreenOffset,0))}f=u}else void 0!=e.minHeight&&f<e.minHeight&&(f=e.minHeight);e.c.closest(".rev_slider_wrapper").css({height:f})					
						}catch(d){console.log("Failure at Presize of Slider:"+d)}						
					};</script>

/js/sm/excanvas.js

allstat-pp.ru/7398/791e8143341a181aea92a5cbc40427a57495fa47.js

js/autoptimize_5b27bff2c10364cee0775daa5cb7d65d.js

С помощью [pre data-key="G#" id="soungchord"] как раз подключается плагин jQuery Chord Transpose Plugin, а скрывают они текст и аккорды через javascript:;.

Не подскажите, что это за javascript:;?

И где его можно взять?

Возможно есть еще какие-либо решения этого вопроса?

Answer 1

[Евгений Журов]

Например

Comments

[NikolayNB]

Спасибо большое за помощь. Простите меня трудного. Сделал всё как в Вашем примере. На странице вставил код:



CSS вставил в тему:



Подключил jquery в HEAD>:

script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1...">

Скрипт поставил перед закрывающим тегом /BODY>:



И в итоге получилась такая картина:



Всё бы хорошо, но только кнопки не работают.

Где и что я не правильно сделал? Сайт на движке WP

[Евгений Журов]

NikolayNB,

Сделал всё как в Вашем примере.

Нет, не всё) Внимательно сравните мой и ваш html.

[NikolayNB]

Я просто немного модифицировал, обернул в div, тогда кнопки стали в ряд и в тег pre> добавил: pre data-key="G#" >, тогда появляется панель транспондера аккордов..
Если скопировать как у вас:



Тогда получается такая картина:



Но все равно кнопки не работают, не выключают ни текст, ни аккорды.

И еще, когда вставляешь чистый тег pre> , почему-то ломается вся структура страницы. Все кладки и спойлеры, которые на странице перестают открываться.



Его я ставил, чтоб можно было проигрывать ноты на сайте. Но это сразу ломает всю страницу. Почему так происходит не знаете?

[Евгений Журов]

NikolayNB, смотрите сообщения в консоли браузера, как правило, он сообщает о причинах, почему какой-то фрагмент кода ломается. Причины могут быть в чем угодно, но разбираться в них - все-таки уже выходит за рамки просто вопроса. Думаю вам стоит сначала хорошенько изучить основы html и javascript, а точнее - как именно происходит взаимодействие js с DOM-деревом, чтобы понимать, как вся эта кухня работает.

[Евгений Журов]

NikolayNB, и кстати, мой код, который вы вставили в body, должен быть обернут в функцию, инициализирующую сам jquery

jQuery(document).ready(function($) {
  //Place code here
})

[NikolayNB]

Благодарю за помощь. Сделал так как Вы посоветовали:

<script type="text/javascript"> jQuery(document).ready(function($) {
  //Place code here

$('.view_switcher').on('click', switchView)

function switchView() {
	let cls = $(this).data('class')
  let txt = cls == '_no_text'
  	? ['Скрыть текст', 'Показать текст']
    : ['Скрыть аккорды', 'Показать аккорды']
  
	if ($('.section').hasClass(cls)) {
  	$('.section').removeClass(cls)
    $(this).text(txt[0])
  } else {
    $('.section').addClass(cls)
    $(this).text(txt[1])
  }
}	
});
</script>

И-и-и-и-и-и-и Вуа-а-ля заработало. Слава Богу.

Но сразу возникли трудности:

1. WP активно удаляет тег /span>, поэтому текст перестает скрываться.

2. Не могу запустить jquery.transposer. Для его включения нужен такой тег: pre data-key="G#" > , а для сокрытия текстов нужен просто тег: pre >. А можно этот конфликт убрать и совместно заставить существовать? Да еще data-key="G#" меняется в зависимости от тональности произведения. Он может быть и data-key="F#" и data-key="D#" и куча других других ключей.

[NikolayNB]

У конкурентов реализовано так

На странице такой код:

<div class="chordsnav" ><a href="javascript:;" class="hidetext">Скрыть текст</a><a href="javascript:;" class="hidechords">Скрыть аккорды</a></div>
<pre  data-key="G#" id="soungchord">
Припев:
G#m     G#m    H     F#/A#
О-о-о-о
C#m      G#m    H    F#/A#
О-о-о-о

Куплет:
</pre>

А в скрипте там вместе все в одном файле нашел следующее:

/*!
 * jQuery Chord Transposer plugin v1.0
 * http://codegavin.com/projects/transposer
 *
 * Copyright 2010, Jesse Gavin
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://codegavin.com/license
 *
 * Date: Sat Jun 26 21:27:00 2010 -0600
 */


Здесь код самого транспортера а далее:


(jQuery);jQuery(document).ready(function(){
	jQuery("#soungchord").transpose();each_str();
	jQuery(".hidetext").click(function(){
		var el_text=jQuery(this).html();if(el_text=='Скрыть текст'){
	jQuery(this).html('Показать текст');if(jQuery('.chopds').length>0){
	jQuery('#soungchord').html(ako)}else{jQuery('#soungchord').html('')}}
	else{j(this).html('Скрыть текст');if(jQuery('.chopds').length>0){
	jQuery('#soungchord').html(original)}
	else{jQuery('#soungchord').html(ako)}}});
	jQuery(".hidechords").click(function(){
		var el_text=jQuery(this).html();if(el_text=='Скрыть аккорды'){
	jQuery(this).html('Показать аккорды');if(jQuery('.text').length>0){
	jQuery('#soungchord').html(texts)}
	else{jQuery('#soungchord').html('')}}
	else{jQuery(this).html('Скрыть аккорды');if(jQuery('.text').length>0){
	jQuery('#soungchord').html(original)}else{jQuery('#soungchord').html(texts)}}});
	var i;jQuery('#soungchord span').each(function(){
		var t_id=jQuery(this).attr('class'),t_html=jQuery(this).html(),t_txt=t_html.toLowerCase();for(i=0;i<videlit.length;i++){
		if(t_txt.indexOf(''+videlit[i]+'')!=-1)jQuery(this).html('<b style="color: #535353;text-transform: uppercase;font-weight:bold">'+t_html+'</b>');}});function each_str(){if(original=='')original=jQuery('#soungchord').html();
		if(texts==''||ako==''){
			var last_sp='',prob='',prip='';jQuery('#soungchord span').each(function(){
		var t_id=jQuery(this).attr('class'),t_html=jQuery(this).html();
		if(t_id=='text'&&t_html!=''){t_txt=t_html.toLowerCase();for(i=0;i<videlit.length;i++){
		if(t_txt.indexOf(''+videlit[i]+'')!=-1){t_html=''+t_html+'';prip=''+t_html+'';}}
texts=''+texts+'<span class="text" style="display:block;">'+t_html+'</span>';last_sp='texts';}
if(t_id=='chopds'&&t_html!=''){
	var pus='',pr='';if(prob=='1')pus='<span style="display:block;">&nbsp;</span>';if(prip!='')pr=prip;ako=''+ako+''+pus+''+pr+'<span class="chopds" style="display:block;white-space: pre-line;">'+t_html+'</span>';last_sp='ako';prob='';prip='';}
if(t_html==''){if(last_sp=='ako')ako=''+ako+'<span style="display:block;">&nbsp;</span>';if(last_sp=='texts')texts=''+texts+'<span style="display:block;">&nbsp;</span>';prob='1';}})}}});

Я пробовал вставлять этот код в 1 скрипт вместе с транспортером, и ставить тот же текст в html, но не работает скрытие текста.